Question

尝试使用具有半透明背景和水平和垂直居中文本的响应式网格数小时才能工作。一切正常，除了居中的文字和背景叠加，使背景图像变暗！

这是一个网格项目：

<article class="grid-box">
    <div class="grid-wrapper">
        <div class="grid-content">
            <div class="grid-background">
                <header>
                   <h2>Main</h2>
                   <h3>Sub</h3>
                </header>
            </div>
        </div>
    </div>
</article>

CSS：

.grid-box {
    width:33.33%;
    max-width:400px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin-bottom:30px;
}

.grid-box .grid-wrapper {
    overflow: hidden;
    width:100%;
}

    .grid-box .grid-wrapper .grid-content {
    background: url(https://www.dennisjauernig.com/wp-content/uploads/getting-ready-hochzeitsfotos-hochzeitsfotograf.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;  
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    padding-bottom:67%;
    width:100%;
    height:0;
}

.grid-box .grid-wrapper .grid-content:hover{
    -moz-transform: scale(1.1);  
    -o-transform: scale(1.1);  
    -webkit-transform: scale(1.1);  
    transform: scale(1.1);
}

.grid-background{
    background:url(https://www.dennisjauernig.com/wp-content/themes/selfmade/images/transparent05.png);
}

这是jsfiddle http://jsfiddle.net/dz2f83sz/。住在这里作为测试：https://www.dennisjauernig.com/berlin-hochzeitsfotos2/

Answer 1

垂直居中总是很困难（桌子除外）。

将.grid-content的位置设置为relative。
将.grid-background设置为“display：table;”，将高度和宽度设置为 100％和绝对的位置。

然后将followinf样式添加到标题：

.grid-background header{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

http://jsfiddle.net/dz2f83sz/5/

Answer 2

header{
    text-align:center;
}
.grid-box {
        width:100%;
        max-width:400px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }

    .grid-box .grid-wrapper {
    	overflow: hidden;
        width:100%;
    }

        .grid-box .grid-wrapper .grid-content {
        background: url(https://www.dennisjauernig.com/wp-content/uploads/getting-ready-hochzeitsfotos-hochzeitsfotograf.jpg);
        background-size: cover;
        background-position: center center;
    	background-repeat: no-repeat;
    	-webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;  
        -o-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        padding-bottom:67%;
        width:100%;
        height:0;
    }

    .grid-box .grid-wrapper .grid-content:hover{
    	-moz-transform: scale(1.1);  
       	-o-transform: scale(1.1);  
       	-webkit-transform: scale(1.1);  
       	transform: scale(1.1);
    }

    .grid-background {
        background:url(https://www.dennisjauernig.com/wp-content/themes/selfmade/images/transparent05.png);
    }

<article class="grid-box">
        <div class="grid-wrapper">
            <div class="grid-content">
                <div class="grid-background">
                    <header>
                       <h2>Main</h2>
                       <h3>Sub</h3>
                    </header>
                </div>
            </div>
        </div>
    </article>

具有透明背景和居中文本的CSS响应网格

2 个答案: