效果圖

第一張

第二張

同樣的div下面，不同的圖片打底是不是感覺完全不一樣，不多說，上代碼

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ù)的幾種，所以可以使用全局變量來存放，這樣在實(shí)際使用過程中，如果配色上需要進(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>