在Web前端開發中，經常會遇到需要在圖片上加遮罩的情況。這時候，我們可以使用CSS來實現這個功能。
在HTML中，我們可以使用![]()
標簽來插入圖片。然后，使用CSS中的background屬性，來設置圖片的背景。例如：
<style>
.img-wrapper {
width: 300px;
height: 200px;
background-image: url("example.jpg");
background-size: cover;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
</style>
<div class="img-wrapper">
<img src="example.jpg" alt="example">
</div>我們首先創建一個標簽，用來包含![]()
標簽。然后，我們給這個
標簽設置一個寬度和高度，以及用background-image屬性來設置背景圖片，用background-size屬性來設置背景圖片的尺寸。同時，我們還給這個
標簽設置了一個position屬性為relative，這樣就可以在它上面添加一個遮罩。
接下來，我們使用:before或:after偽元素來添加遮罩。我們使用content屬性來設置遮罩內容為空，然后設置position屬性為absolute，top和left屬性為0，width和height屬性為100%，這樣遮罩就會覆蓋整個![]()
標簽。最后，我們設置background-color屬性來設置遮罩的顏色和透明度。
以上就是使用CSS來添加圖片遮罩的方法。該方法可以在不使用JavaScript的情況下，添加圖片遮罩效果，讓網頁更加美觀。
上一篇監聽css變寬