CSS遮罩效果(模糊效果，陰影效果，毛玻璃效果)
阿新 • • 發佈：2020-07-16
一般遮罩 background : #000；
在body標籤的最後加上div標籤作為遮罩，如下：
<div class="mask"></div>
其css樣式：
-
.mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; background:#000; /*一般遮罩隨便設定一個顏色*/ }
注意：一般遮罩加上透明度opacity就是陰影效果了。
陰影效果 background : rgba(0,0,0,0.5)；hsla(0,100%,80%,0.5);
程式碼和一般遮罩一樣，唯一不同的是設定.mask遮罩的背景色用rgba()表示，當然hsla()也是可以的。css如下：
-
.mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*/ /*background:#000; opacity:0.5; */ }
css中的顏色可以由RGB色彩空間和HSL色彩空間兩種方式來表述。其中我們常用的是RGB色彩空間。
RGB色彩空間的顏色表示方式有：十六進位制顏色（如紅色：#FF0000）、RGB顏色（如紅色：rgb(255,0,0)）,RGBA顏色（如半透明的紅色rgba(255,0,0,0.5)），此外常見的顏色可以直接寫顏色名（如紅色：red）。
HSL色彩，是一種工業界的色彩標準，因為它能涵蓋到人類視覺所能感知的所有顏色，所以在工業界廣泛應用。HSL色彩空間中，H（Hue）：代表色調，S（Saturation）：代表飽和度，L（Lightness）：代表亮度，（A（Alpha）：代表不透明度）。
模糊效果(毛玻璃效果) filter: blur(5px);
-
//css定義一個模糊效果類 .blur{ -webkit-filter: blur(5px); /* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } //js 遮罩出現時給遮住物件加模糊效果 if($(".mask").is(":visible")){ $(".context").addClass("blur"); } else{ $(".context").removeClass("blur"); }pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html
注意：這個是給需要模糊的物件加blur類，而不是遮罩本身。