圖片添加透明度蒙版
阿新 • • 發佈：2017-07-03
width alt image web 需要 pre pan set absolute
看了很多圖片上添加透明度的文章，大部分都是圍繞
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%的透明度，而且文字不受影響
圖片添加透明度蒙版