CSS的filter属性详解

目录

前言

函数

blur()函数

brightness()函数

contrast()函数

drop-shadow()函数

grayscale()函数

hue-rotate() (en-US)函数

invert() (en-US)函数

opacity()函数

saturate() (en-US)函数

sepia() (en-US)函数

组合函数


前言

CSS的filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

函数

filter 属性可设置为 none 或下面列出的一个或多个函数。如果任何函数的参数无效,则该函数返回 none。除特殊说明外,函数的值如果接受百分比值(如 34%),那么该函数也接受小数值(如 0.34)。

当单个 filter 属性具有多个函数时,滤镜将按顺序依次应用。

blur()函数

blur()函数是filter属性的一种取值,用于给元素添加模糊效果。

使用blur()函数时,需要指定一个长度值作为参数,表示要应用的模糊程度。模糊程度越大,图像就越模糊。例如:

.blur-element {
  filter: blur(5px);
}

上述代码将给class为"blur-element"的元素添加一个5像素的模糊效果。

除了长度值以外,blur()函数还可以接受其他单位,如像素(px)、百分比(%)等。此外,也可以通过使用不同的滤镜函数组合来创建更复杂的效果。

示例



	
		
	
	
		

在上面的示例中,我们创建了一个带有class为"blur-element"的div元素,并将其背景图片设置为'img/7.png'。然后,在CSS样式中,我们为该元素设置了宽度、高度和filter属性。filter属性的blur()函数被设置为5像素,这将给元素应用一个5像素的模糊效果。

brightness()函数

CSS的filter属性中的brightness()函数用于调整图像的亮度。它可以接受一个百分比值或者小数作为参数,用于指定亮度的级别。

下面是brightness()函数的使用示例:

.brightness-element {
  filter: brightness(150%); /* 或者 filter: brightness(1.5); */
}

上述代码将给class为"brightness-element"的元素应用一个亮度增加50%的效果。你可以通过调整百分比或小数的值来改变亮度的级别。值为 0% 将创建全黑图像,值大于100%会增加亮度,而值小于100%会减少亮度。

如果要降低亮度,可以使用小于1的小数值或小于100%的百分比。例如,filter: brightness(0.8)会将亮度降低为80%。

需要注意的是,brightness()函数可以与其他滤镜函数组合使用,以创建更复杂的效果。

示例 



	
		
	
	
		

contrast()函数

CSS的filter属性中的contrast()函数用于调整图像的对比度。它接受一个百分比值或者小数作为参数,用于指定对比度的级别。

下面是contrast()函数的使用示例:

.contrast-element {
  filter: contrast(150%); /* 或者 filter: contrast(1.5); */
}

上述代码将给class为"contrast-element"的元素应用一个对比度增加50%的效果。可以通过调整百分比或者小数值来改变对比度的级别。值是 0% 将使图像变灰,值大于100%会增加对比度,而值小于100%会降低对比度。

如果想降低对比度,可以使用小于1的小数值或者小于100%的百分比。例如,filter: contrast(0.8)会将对比度降低为80%。

示例



	
		
	
	
		

drop-shadow()函数

CSS的filter属性中的drop-shadow()函数用于向图像添加阴影效果。它可以接受多个参数,包括阴影的颜色、偏移量、模糊度等。

下面是drop-shadow()函数的使用示例:

.shadow-element {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

上述代码将给class为"shadow-element"的元素应用一个向右下角偏移2个像素、向外扩散4个像素、颜色为半透明黑色的阴影效果。

drop-shadow()函数有三个必需的参数:水平偏移量、垂直偏移量和模糊半径。可以通过添加第四个参数来指定阴影的颜色。若省略第四个参数,则默认使用与元素同色的阴影。

下面是drop-shadow()函数的参数说明:

  • 水平偏移量:阴影相对于元素的水平位移量。可以为负数,表示阴影向左偏移。
  • 垂直偏移量:阴影相对于元素的垂直位移量。可以为负数,表示阴影向上偏移。
  • 模糊半径:阴影模糊的半径大小。可以为0,表示完全不模糊。
  • 阴影颜色:阴影的颜色。可以使用命名颜色、RGB值、十六进制颜色、HSL值等表示颜色的格式,也可以使用rgba()函数指定颜色和透明度。

示例



	
		
	
	
		

grayscale()函数

CSS的filter属性中的grayscale()函数用于将图像转为灰度图像。它接受一个百分比值或者小数作为参数,用于指定灰度的级别。

下面是grayscale()函数的使用示例:

.grayscale-element {
  filter: grayscale(50%); /* 或者 filter: grayscale(0.5); */
}

上述代码将给class为"grayscale-element"的元素应用一个灰度效果,使图像变为原来亮度的50%。可以通过调整百分比或者小数值来改变灰度的级别。值为100%或者1表示完全灰度,而值为0%或者0表示完全恢复原色。

如果想要部分应用灰度效果,可以将灰度函数与其他滤镜函数组合使用。例如,可以使用以下代码将图像的一部分变为灰度,而保持其他部分的原色:

.grayscale-element {
  filter: grayscale(100%) brightness(150%);
}

示例



	
		
	
	
		

hue-rotate() (en-US)函数

CSS的filter属性中的hue-rotate()函数用于对图像进行色相旋转。它接受一个角度值作为参数,用于指定旋转的角度。

下面是hue-rotate()函数的使用示例:

.hue-rotate-element {
  filter: hue-rotate(90deg);
}

上述代码将给class为"hue-rotate-element"的元素应用一个色相旋转效果,将图像的色相顺时针旋转90度。可以通过调整角度值来改变旋转的程度。

hue-rotate()函数的参数是一个角度值,可以使用角度单位(如deg)表示,也可以使用弧度单位(如rad)表示。正值表示顺时针旋转,负值表示逆时针旋转。角度值可以是任意实数,但超过360度或-360度的部分会被忽略。值为 0deg,则图像无变化。

示例



	
		
	
	
		

invert() (en-US)函数

CSS的filter属性中的invert()函数用于将图像进行反色处理。它接受一个百分比值或者小数作为参数,用于指定反色的程度。

下面是invert()函数的使用示例:

.invert-element {
  filter: invert(50%); /* 或者 filter: invert(0.5); */
}

上述代码将给class为"invert-element"的元素应用一个反色效果,使图像的颜色与原来相反,亮度和对比度保持不变。可以通过调整百分比或者小数值来改变反色的程度。值为100%或者1表示完全反色,而值为0%或者0表示完全恢复原色。

如果想要部分应用反色效果,可以将反色函数与其他滤镜函数组合使用。例如,可以使用以下代码将图像的一部分变为反色,而保持其他部分的原色:

.invert-element {
  filter: invert(100%) brightness(150%);
}

示例



	
		
	
	
		

opacity()函数

CSS的filter属性中的opacity()函数用于调整元素的不透明度(透明度)。它接受一个百分比值或者小数作为参数,用于指定元素的透明度级别。

下面是opacity()函数的使用示例:

.opacity-element {
  filter: opacity(50%); /* 或者 filter: opacity(0.5); */
}

上述代码将给class为"opacity-element"的元素应用一个透明效果,使元素的透明度降低到原来的50%。可以通过调整百分比或者小数值来改变透明度的级别。值为100%或者1表示完全不透明,而值为0%或者0表示完全透明。

需要注意的是,opacity()函数会影响元素及其内容的透明度,包括文本、图像等。如果只想调整背景的透明度而保持文本不透明,可以考虑使用rgba颜色值来设置背景色的透明度。

示例



	
		
	
	
		

saturate() (en-US)函数

CSS的filter属性中的saturate()函数用于调整图像的饱和度。它接受一个百分比值或者小数作为参数,用于指定饱和度的级别。

下面是saturate()函数的使用示例:

.saturate-element {
  filter: saturate(200%); /* 或者 filter: saturate(2); */
}

上述代码将给class为"saturate-element"的元素应用一个饱和度增强效果,使图像变得更加鲜艳。

可以通过调整百分比或者小数值来改变饱和度的级别。值为100%或者1表示保持原有饱和度不变,而值为0%或者0表示完全去除饱和度(即灰色图像)。值大于100%或者1表示增强饱和度,而值小于100%或者1表示减少饱和度。

示例



	
		
	
	
		

sepia() (en-US)函数

CSS的filter属性中的sepia()函数用于将图像转换为深褐色(复古)效果。它接受一个百分比值或者小数作为参数,用于指定sepia(褐色)效果的程度。

下面是sepia()函数的使用示例:

.sepia-element {
  filter: sepia(100%); /* 或者 filter: sepia(1); */
}

上述代码将给class为"sepia-element"的元素应用一个sepia效果,使图像呈现出复古的褐色调。可以通过调整百分比或者小数值来改变sepia效果的程度。值为100%或者1表示完全应用sepia效果,而值为0%或者0表示完全不应用sepia效果。

示例



	
		
	
	
		

组合函数

CSS的filter属性支持多个滤镜函数的组合使用,以创建更复杂的效果。可以通过空格将多个函数链接在一起,它们的顺序会影响最终效果。

以下是一些常见的filter属性的组合函数:

1、brightness()和contrast()

.brightness-contrast {
  filter: brightness(150%) contrast(150%);
}

上述代码将给class为"brightness-contrast"的元素应用一个亮度增强和对比度增强的效果,使图像更加鲜明。

2、blur()和opacity()

.blur-opacity {
  filter: blur(5px) opacity(50%);
}

上述代码将给class为"blur-opacity"的元素应用一个模糊和透明效果,使图像变得模糊且半透明。

3、grayscale()、sepia()和saturate()

.grayscale-sepia-saturate {
  filter: grayscale(100%) sepia(50%) saturate(200%);
}

上述代码将给class为"grayscale-sepia-saturate"的元素应用一个灰度、褐色和饱和度增强的效果,使图像呈现出复古的灰色调。

你可能感兴趣的:(css,css,前端,html)