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