CSS之圖片壓蓋效果案例分析

標籤：ext   ant   href   text   分析   github   vertica   lin   splay   

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

CSS之圖片壓蓋效果案例分析