CSS實現鼠標移入遮罩,是一種常見的頁面美化技巧。我們可以使用CSS的偽類:hover來實現此效果。
.hover-shade{ position:relative; } .hover-shade:hover::before{ content:''; position: absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.5); z-index:1; }
以上是一個典型的CSS代碼實現。首先,我們需要在需要實現遮罩的元素(例如圖片、button等)的父元素里面加上position:relative;。這是因為遮罩需要依賴于父元素的定位。
然后,我們使用:hover偽類來控制遮罩的顯示。在:hover后面,我們使用CSS的::before偽元素,這個偽元素會在遮罩元素的內部添加一個額外的元素作為它的子元素,來實現遮罩的效果。同時,我們可以利用Z-index(層級)功能,將遮罩置于原元素之上。
接下來,我們可以在:before的內容(即content屬性)里面使用''。這個屬性在上面的CSS代碼中的作用是:無論原元素里面創建哪種元素,遮罩都將作為第一個孩子元素存在我們的元素內。
最后,我們可以使用RGBA函數來調整遮罩的透明度。RGBA函數是一種具有四個參數的顏色描述函數,它的四個參數分別代表了紅、綠、藍和透明度(也就是RGBA)。其中,透明度的范圍是從0到1,值越小,元素越透明。這次我們設置的透明度為0.5,比較清晰地顯示了背景,并且不會太過影響正在顯示的元素。
上一篇css客服底部跟隨代碼
下一篇css實現網頁局部滾動