效果圖
第一張
第二張
同樣的div下面叙身，不同的圖片打底是不是感覺完全不一樣统倒，不多說(shuō)，上代碼
html代碼如下：
<div>
<img src="http://upload-images.jianshu.io/upload_images/1367738-a3f4c2452186d0cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="canopacity">
<p class="wb">
黑底白字，<br>透明的文字紧唱，<br>透明的，<br>透明的
</p>
<p class="bw">
白底黑字计露，<br>透明的文字蔫敲，<br>透明的，<br>透明的
</p>
</div>
<div>
<img src="http://upload-images.jianshu.io/upload_images/1367738-58d530c97baf859a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="canopacity">
<p class="wb">
黑底白字驻谆，<br>透明的文字梁丘，<br>透明的侵浸，<br>透明的
</p>
<p class="bw">
白底黑字，<br>透明的文字氛谜，<br>透明的掏觉，<br>透明的
</p>
</div>
css代碼如下：
:root{
--black_bg:rgba(0,0,0,0.2);
--white_bg:rgba(255,255,255,0.2);
--black_txt:rgba(0,0,0,0.7);
--white_txt:rgba(255,255,255,0.7);
}
body{font-family:Arial,"Microsoft YaHei";}
div{position: relative;}
.canopacity{width: 500px;height: 500px;}
.wb{font-size:16px;font-weight:150;text-shadow:2px 2px 3px rgb(64, 60, 60);
line-height:28px;display:block;background-color:var(--black_bg);
position:absolute;left:20px;top:40px;width:350px;
margin:30px;padding:20px;color:var(--white_txt);}
.bw{font-size:16px;font-weight:150;line-height:28px;
display:block;background-color:var(--white_bg);
position:absolute;left:20px;top:240px;width:350px;
margin:30px;padding:20px;color:var(--black_txt);}
總結(jié)一點(diǎn)點(diǎn)
在項(xiàng)目中，一般使用的顏色值都會(huì)固定在不多數(shù)的幾種值漫，所以可以使用全局變量來(lái)存放澳腹，這樣在實(shí)際使用過(guò)程中，如果配色上需要進(jìn)行修改就會(huì)方便很多杨何。
新增一點(diǎn)點(diǎn)
在ios系統(tǒng)上酱塔，會(huì)有很多毛玻璃的地方出現(xiàn)，那么在h5中如何去實(shí)現(xiàn)呢危虱？
看效果
毛玻璃效果
看代碼
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
<div class="blur">
<img src="http://upload-images.jianshu.io/upload_images/1367738-a3f4c2452186d0cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="canopacity">
</div>
