图片文字小示范

效果图

第一张

第二张

同样的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);}

总结一点点

在项目中，一般使用的颜色值都会固定在不多数的几种，所以可以使用全局变量来存放，这样在实际使用过程中，如果配色上需要进行修改就会方便很多。

新增一点点

在ios系统上，会有很多毛玻璃的地方出现，那么在h5中如何去实现呢？

看效果

毛玻璃效果

看代码

.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>

图片 文字 小示范

总结一点点

新增一点点

推荐阅读更多精彩内容

图片文字小示范