首页 > 学术百科

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)*/

streak pro d43/*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定义⼀个模糊效果类

神经质症

魅族x3.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类，⽽不是遮罩本⾝。

>民族冲突

本文发布于:2024-09-21 01:47:31，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/292055.html

上一篇：win10如何设置窗口透明毛玻璃效果

下一篇：漫透射材料原理及透光率的测量

标签：效果遮罩视觉

留言与评论（共有 0 条评论）