關於使用CSS製作遮罩層

2022-07-02 01:30:11 字數 602 閱讀 3471

結構:整個元件分為a和b兩個子部分。

內容區域為a部分,遮罩層為b部分。

父部分的類名為:.box,a部分為.content  b部分為 .mask

父級.box的**如下:

position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 0;

z-index: 100;

a部分.content的**:

position: absolute;

left:0;

right: 0;

bottom: 0;

z-index: 50;

background-color: rgb(255, 255, 255);

b部分.mask的**:

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color:rgb(102, 102, 102);

opacity: 0.7;

css彈出遮罩層

說明 需要jquery支援,支援ie8 googlechrome,firefox,話不多說,上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...

純CSS遮罩層特效

demo 背景顏色 漸變 邊框圓角 相對定位 多餘邊框隱藏 滑鼠指標變成小手 box 設定乙個偽類before 前置的 content 內容設定為空 背景設定為透明背景顏色 寬高各為父級的百分百 整體透明度為0 定位為絕對定位 top 為 0 left 為 0 層次結構 index為0 transi...

關於定位 遮罩層效果使用心得

今天寫 時遇到個問題。原效果要求當滑鼠聚焦在其他位置時顯示正常內容,滑鼠懸停時顯示隱藏內容。我自己的思路是將隱藏部分設定位所需大小,透明度為零隱藏。定位在需要位置,滑鼠懸停觸發效果。用css實現。定位時發現不能定位到所需位置。所以就重新學了定位,並歸納如下 1position值 static rel...