CSS3遮罩層是指通過CSS3技術實現的在網頁上覆蓋一層半透明遮罩的效果,可以用于實現各種效果,比如彈窗、提示框、圖片放大等。
實現遮罩層需要用到CSS3中的偽類選擇器“::before”和“::after”,以及屬性“content”、“position”、“z-index”等。
/* 遮罩層樣式 */ .mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 9999; } /* 圖片放大效果 */ .img-wrapper{ position: relative; } .img-wrapper:hover::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 1; } .img-wrapper img{ z-index: 2; }
以上是兩個常見的遮罩層樣式,第一個為全屏遮罩效果,第二個為圖片放大效果。可以根據需要修改樣式來實現更多效果。
上一篇css語言列樣式圖片
下一篇css語言具備單頁面應用