CSS3蒙層是一種在網頁中覆蓋在元素上方的遮罩層。蒙層可以用來實現圖像遮罩、文字遮罩、視頻遮罩等多種效果,為網頁設計師提供了更多的創意和實現空間。
要使用 CSS3 蒙層,我們需要幾行簡單的代碼。下面是一個簡單的例子:
我們在一個盒子里面嵌套一張圖片和一個遮罩層。
遮罩層使用position: absolute;
定位到盒子的左上角, 它的寬高要和盒子一樣大,通過調整它的背景顏色和透明度來達到遮罩的效果。這個例子中的遮罩是一個 50% 的半透明黑色。
相信在理解了以上代碼示例后,你已經可以輕松學會 CSS3 蒙層的效果了。就讓我們發揮自己的創意,嘗試在設計中使用它吧。