html模糊遮罩层磨砂玻璃,科技常识：CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)...

今天小编跟大家讲解下有关CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果) 的相关资料，希望小伙伴们看了有所帮助。

一般遮罩 background : #000；

在body标签的最后加上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");}

注意：这个是给需要模糊的对象加blur类 而不是遮罩本身。

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。