标签：com doc 属性 ntb charset log style 图片 point
看了很多图片上添加透明度的文章，大部分都是围绕
opacity：
这个属性来做的，但是实际项目中，该效果会影响到图片里面的字段，或者是
-webkit-mask：
这个需要配合渐变或者其他来实现，而且以白色半透明为主。如果我们需要的是黑色半透明呢，以下是我个人的的一些写法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> .list-detail{ width: 750px; height: 420px; position: relative; } .list-detail .black{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.3); } img{ width: 100%; height: 100%; } </style> </head> <body> <div class="content listA"> <div class="list-detail"> <div class="black"></div> <img src="../../../images/scene.jpg" alt="" /> <div class="pointB"> <p class="tit">圣诞狂欢夜</p> <p class="title">体验幸福的味道，享受美的时光</p> </div> <div class="pointC"> 征集期：2017.6.8截止 </div> </div> </div> </body> </html>
效果图如下：
图片上已有黑色30%的透明度，而且文字不受影响
标签：com doc 属性 ntb charset log style 图片 point
原文地址：http://www.cnblogs.com/zhai-zhai/p/7111098.html
