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

【问题标题】：CSS Responsive Grid with transparent backgrounds and centered text具有透明背景和居中文本的 CSS 响应式网格
【发布时间】：2015-03-31 21:00:55
【问题描述】：

尝试了几个小时来获得具有半透明背景和水平和垂直居中文本的响应式网格。一切正常，除了居中的文本和背景覆盖使背景图像变暗！

这是一个网格项目：

<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/

【问题讨论】：

好的，让它在 Firefox 和 Chrome 中工作。但 Safari 忽略了垂直对齐：中间。有什么建议？ jsfiddle.net/dz2f83sz/22

标签： html css responsive-design grid

【解决方案1】：

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>

【讨论】：

谢谢阿迪！但这只是水平的。 :)

【解决方案2】：

垂直居中总是很困难的（除了表格）。

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

然后在表头添加followinf样式：

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

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

【讨论】：