04 遮罩層 獸

2021-10-03 01:17:14 字數 702 閱讀 8231

通過使用背景顏色透明度,相對位置,以及hover屬性,來達到效果:demo案例**

在**中文字的居中,需要注意處理p標籤的預設margin

p

在遮罩的顯示方式中,第一種是通過display:none來控制,上下左右的遮罩顯示,通過overflow: hiddenleft,top,right,bottom取值為負數來隱藏,顯示的時候,對應的left,top,right,bottom設定為顯示區位置即可,如0.總之,一種是display直接顯示或隱藏,另外一種是設定位置躲進overflow:hidden區域

/**---------部分**貼圖,詳情見demo---------------------*/

/** 特效 */

.box-center

.box-left

.box-top

.box:hover

.box-center

.box-left

.box-top

}

簡單遮罩層

效果 1 heml頁面的原始碼 點選我我是彈出的遮罩層 關閉2.css檔案 con shade 遮罩層 greybackground closebtn 3.js function 當瀏覽器視窗大小改變時 window resize function 當拉動滾動條時,彈出層跟著移動 window sc...

css彈出遮罩層

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

div 遮罩層 彈窗

div 遮罩層 彈窗 title style type text css layer1 layer1 win top layer1 win top a shade layer1 content body style head body div id shade div a href onclick ...