CSS之图片压盖效果案例分析

CSS之图片压盖效果案例分析

最近在做某个网站的静态页面，发现有很多图片压盖效果的布局，特来记录一下布局技巧。

碰到这种布局你会怎么做：

第一反应肯定是浮动，没错，可以把这几个图片放在ul列表的li标签里，给每个li标签内添加img和文字。如：

<ul>  <li> <img src="" alt=""><p>文字</p></li>  <li><img src="" alt=""><p>文字</p></li>  <li><img src="" alt=""><p>文字</p></li></ul>

然后再使用绝对定位，相对定位让压盖调到合适位置。 
这不是重点，重点是怎么让压盖层上的文字垂直居中，也许一行文字垂直居中很easy，但是两行，多行呢。 
很简单，给文字下的压盖层设置display:table; 再给文字设置display:table-cell;和vertical-align:middle;就可以了。 
这是因为vertical-align属性不在表单元素里无法使用。 
所以要把盒子变成表单元素。 
我这里只演示两个盒子的做法，代码如下：

     * {        margin:0;        padding:0;        font-family:"Microsoft Yahei";        color:#fff;     }     .box {        position:relative;        float:left;        width: 200px;        height: 200px;        margin-right:20px;     }     .mask {        position: absolute;        display: table;        left:0;        bottom:0;        width: 176px;        height: 44px;        padding:10px 12px;        background: rgba(0,0,0,.5);     }     .mask p {        display:table-cell;        vertical-align: middle;     }

<div class="box">        <img src="images/hot1.jpg" alt="">        <div class="mask">                <p>葫芦庙为什么会失火？</p>        </div>

</div>    <div class="box">        <img src="images/hot2.jpg" alt="">        <div class="mask">            <p>孙悟空的金箍棒有何特别之处？</p>        </div>

</div>

点击这里看demo：https://cyanar.github.io/relative-absolute/%E5%8E%8B%E7%9B%96%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%ADdemo.html