CSS中filter属性的使用

时间：2023-03-31 02:05:40 CSS

filter属性定义了元素blur的视觉效果，给图像设置了高斯模糊。“半径”值设置高斯函数的标准偏差，或者屏幕上有多少像素混合在一起，因此值越大，越模糊。如果没有设置值，默认为0；此参数可以设置css长度值，但不接受百分比值。身体{背景颜色：#000;颜色：天蓝色；}div{边框：1px实心#fff；填充：10px；宽度：610px；margin:10px;}.blur1{filter:blur(0.4px);}.blur2{filter:blur(1px);}.blur3{filter:blur(4px);

给图像画一个高斯模糊，值越大越模糊

blurblurblur

对图片应用亮度线性乘法，使其显得更亮或更暗。如果该值为0%，则图像将完全变黑。值为100%不会导致图像发生任何变化。其他值对应线性乘数效应。值超过100%也可以，图像会比原始图像更亮。如果未设置值，则默认值为1。身体{背景颜色：#000;颜色：天蓝色；}div{边框：1px实心#fff；填充：10px；宽度：610px；margin:10px;}.brightness1{filter:brightness(0.30);}.brightness2{filter:brightness(0.8);}.brightness3{filter:brightness(1);}

给出图像线性乘法，使其显得更亮或更暗。如果该值为0，则图像全黑；如果该值超过100%，则图像更亮

亮度亮度brightness

contrast调整图像的对比度。值为0%时，图像将完全变黑。值为100%时图像保持不变。值可以超过100%，这意味着将应用较低的对比度。如果没有设置值，默认为1。body{background-color:#000;颜色：天蓝色；}div{边框：1px实心#fff；填充：10px；宽度：610px；margin:10px;}.contrast1{filter:contrast(10%);}.contrast2{filter:contrast(50%);}.contrast3{filter:contrast(100%);}

调整图像对比度。值为0使图像完全变黑；超过100%的值将使用较低的对比度

contrastcontrastcontrast

grayscale将图像转换为灰度图像。该值定义转换的比例。值为100%将完全转换为灰度图像，值为0%则不会改变图像。0%到100%之间的值是效果的线性乘数。如果不设置，默认值为0；身体{背景颜色：#000;颜色：天蓝色；}div{边框：1px实心#fff；填充：10px；宽度：610px；margin:10px;}.grayscale1{filter:grayscale(10%);}.grayscale2{filter:grayscale(50%);}.grayscale3{filter:grayscale(100%);

图像转为灰度图，值为0的图像没有变化；值100%完全转换为灰度图像

灰度灰度灰度