平時為圖片添加半透明遮罩效果，我的做法如下：
利用標簽i實現背景半透明遮罩。當鼠標hover時, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6)

<p class="opacity-black-position"><a href="#"><img src="images/4601.jpg" alt=""><i></i></a></p>

為html結構添加如下css樣式：

/* 利用標簽i實現背景半透明遮罩, 兼容性不好 */
.opacity-black-position { width: 460px; height: 460px; position: relative; }
.opacity-black-position i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); transition: background-color .5s;  
}
.opacity-black-position a:hover i { background-color: rgba(0, 0, 0, .6); }

利用opacity簡單實現

昨天看到京東商品圖片上的半透明黑色遮罩，是這樣實現的。當hover時設置a的透明度為0.4

<p class="opacity-black"><a href="#"><img src="images/4601.jpg" alt=""></a></p>

為html結構添加如下css樣式:

.opacity-black { width: 460px; height: 460px; background-color: #000; }
.opacity-black a { transition: opacity .5s; opacity: 1; }
.opacity-black a:hover { opacity: 0.4; }

通過降低自身a及子標簽img的透明度來顯示父輩容器的背景色, 達到的效果和上面是一樣一樣的。

狠狠滴點這里(演示): http://codepen.io/mackxu/pen/mJtvh

轉載于:https://www.cnblogs.com/mackxu/p/image-opacity.html

總結

以上是生活随笔為你收集整理的为图片添加半透明遮罩效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。