脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → CSS的filter属性使用示例

CSS的filter属性添加各种图形效果使用示例

 更新时间：2024年11月30日 09:04:20   作者：Onlooker  
CSS的filter属性用于给元素添加各种图形效果,如模糊、颜色偏移等,它支持多种滤镜函数,如blur()、brightness()、contrast()等,可以单独使用,也可以组合使用,以创建更复杂的效果

CSS的filter属性用于给元素添加各种图形效果,如模糊、颜色偏移等,它支持多种滤镜函数,如blur()、brightness()、contrast()等,可以单独使用,也可以组合使用,以创建更复杂的效果。

前言

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

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

blur()函数

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

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

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

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

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

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: blur(5px);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

在上面的示例中，我们创建了一个带有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()函数可以与其他滤镜函数组合使用，以创建更复杂的效果。

示例 

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: brightness(150%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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%。

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: contrast(150%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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()函数指定颜色和透明度。

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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%);
}

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: grayscale(1) brightness(200%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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，则图像无变化。

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: hue-rotate(90deg);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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%);
}

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: invert(100%) brightness(150%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

opacity()函数

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

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

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

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

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

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: opacity(50%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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表示减少饱和度。

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: saturate(200%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

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效果。

示例

<!DOCTYPE html>
<html>
	<head>
		<style>
			body,
			html {
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.blur-element {
				width: 300px;
				height: 200px;
				background-image: url('img/7.png');
				filter: sepia(100%);
			}
		</style>
	</head>
	<body>
		<div class="blur-element"></div>
	</body>
</html>

组合函数

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

到此这篇关于CSS的filter属性添加各种图形效果使用示例的文章就介绍到这了,更多相关CSS的filter属性使用示例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论