CSS蒙版效果向下調具體是指在圖片或者內容上加上一層半透明的黑色或其他顏色蒙版,在這個蒙版上可以再加上文字、圖標等等。
.mask { position: relative; display: inline-block; } .mask img { display: block; } .mask:before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .mask p { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 10px; z-index: 2; color: #fff; font-size: 16px; }
上述代碼實現了一個蒙版效果,其中.mask為圖片容器的class,img為圖片的class。通過:before偽類創建了一個半透明的黑色蒙版。通過p標簽在蒙版上加上了文字。另外,通過position屬性可以調整蒙版和蒙版上內容的位置。
如果需要在蒙版上加上圖標,可以通過font-awesome等第三方庫,將圖標放在p標簽中即可。
總之,CSS蒙版效果向下調是一種常見的網頁設計方法,可以起到突出重點、突出氛圍等作用,有著廣泛的應用。
上一篇mysql 連接阻塞
下一篇css獲取第一個tr