聊代碼（第一0七集）css樣式（之七十七） 本集中展示的是兩個(gè)顏色遮罩，第一個(gè)是普通顏色遮罩，第二個(gè)是漸變顏色遮罩，請看下圖。
代碼：
＜style type="text/css"＞.底圖{
width:600px; height:400px;
background:url(http://www.oldkids.cn/upload/2018/12/31/blog_
20181231171800190.jpg) no-repeat;}
.顏色遮罩{
width:600px; height:400px;
background-color:#fff;
opacity:0.7;
}
＜/style＞
＜div class="底圖"＞
＜div class="顏色遮罩"＞ ＜/div＞
＜/div＞
＜style type="text/css"＞.底圖{
width:600px; height:400px;
background:url(http://www.oldkids.cn/upload/2018/12/31/blog_
20181231171800190.jpg) no-repeat;}
.漸變遮罩{
width:600px; height:400px;
background:-webkit-gradient(linear,0 0, 0 bottom, from(#0f0), to(rgba(255, 0, 0, 0.8))); /*漸變*/
opacity:0.7;
}
＜/style＞
＜div class="底圖"＞
＜div class="漸變遮罩"＞ ＜/div＞
＜/div＞
代碼解析：
代碼中作了注釋?zhuān)涣碣樖觥?div style="height:15px;">
