CSS可以讓我們對圖片進行多樣化的處理,其中一項就是在圖片上加上透明色。這種技巧一般被稱為圖片蒙版技術。
img { position: relative; } img::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }
上面的代碼就是一個簡單的圖片蒙版實現方式。我們將圖片的position設為relative,這樣后面的偽元素才能按照相對位置進行定位。然后我們用偽元素::after添加一個覆蓋整個圖片的透明背景,這里我使用了rgba的顏色值,其中最后一個參數0.2表示透明程度為20%。
我們也可以用其他方式實現圖片蒙版,比如添加一個帶透明度的png圖片作為背景圖像,或者使用svg。這些方法對于需要更多定制化的情況可能更加實用。