CSS 滤镜 - text-effect 属性

上一页
下一页

CSS 提供了一个非常强大的工具，可以帮助为文本、图像、背景、边框等添加特殊的视觉效果。滤镜（filter）可用于调整网页这些方面的呈现。

在本章中，我们将通过示例详细讨论每个 CSS 滤镜（filter）。

  • filter 属性的值可以是 none，也可以是本章后面列出的一个或多个函数。
  • 如果未向任何函数传递参数或将参数传递给无效参数，则返回 none。
  • 接受以百分比 （%） 表示的参数值的函数也接受以小数表示的相同值 expreseed。例如，55% 可以作为 0.55 传递
  • 可以传递多个函数给 filter 属性，只是您需要在它们之间添加空格。
  • 当传递多个函数时，这些滤镜（filter）将按照它们传递的顺序应用。
  • 可以重复相同的过滤功能。例如：filter：blur（20px） hue-rotate（45deg） blur（15px）。

以下是可以与 filter 属性一起使用的函数列表：

功能 参数 描述 示例
blur() 蓝色效果的半径（px、rem 等） 对输入图像应用模糊效果。 filter:blur(10px);
brightness() 值是百分比或小数 （%）。0% - 黑色图像，100% - 无效果，超过 100% - 提亮元素。 调整元素的亮度。 filter:brightness(62% | 0.62);
contrast() 值是百分比或小数 （%）。0% - 灰色，100% - 无效果，超过 100% - 产生对比度。 调整元素的对比度。 filter:contrast(200%);
grayscale() 值是百分比或小数 （%）。0% - 无影响，100% - 完全灰度。 将元素转换为灰度。 filter:grayscale(80%);
drop-shadow() 值指定水平和垂直偏移量、模糊半径以及阴影的颜色。 将投影效果应用于元素 filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
hue-rotate() 值是以度为单位的角度。 对元素应用色相旋转。 filter:hue-rotate(80deg);
invert() 值是以度为单位的角度。 I反转元素的颜色。 filter: invert(75%);
opacity() 值是一个百分比。0% - 完全透明，100% - 完全不透明。 调整元素的透明度。 filter: opacity(75%);
saturate() 值是一个百分比。 调整元素的饱和度。 filter: saturate(200%);
sepia() 值是一个百分比。 调整元素的棕褐色效果。 filter: sepia(90%);
url() 指定 SVG 滤镜（filter）的 XML 文件的路径，并且可能包含指向特定滤镜（filter）元素的定位点。 用于应用 SVG 滤镜。 filter:url(svg-url#element-id);

CSS 滤镜（filter） - blur（）

blur（） 函数用于为文本或图像添加模糊效果。

该函数可以将以下值作为参数：

blur radius：指定为 <length> 值。该值越大，模糊效果就越大。

  • 默认值为 0。
  • 该函数不接受百分比值。

下面是一个示例：


<html>
<head>
</head>
<body>
	 <h2>Blur effect </h2>
	 <div>
			<h3 style="filter: blur(2px); font-size: 3rem;">Blur(5px)</h3>
			<img style="filter: blur(5px); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
	 </div>
	 <div>
			<h3 style="filter: blur(0.5rem); font-size: 3rem;">Blur(2rem)</h3>
			<h3>Blur(5px)</h3>
			<img style="filter: blur(5px); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
	 </div>
	 <div>
			<h3>Blur(2rem)</h3>
			<img style="filter: blur(2rem); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
	 </div>
</body>
</html>

CSS 滤镜（filter） - brightness（）

Brightness（） 函数用于通过应用线性乘数值为文本或图像添加亮度效果。这使元素看起来更亮或更暗。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 该值小于 100%，会使元素变暗。
  • 值超过100%，使元素明亮。
  • 等于 100% 的值不起作用。
  • 默认值为 1。
  • 不允许使用负值。

下面是一个示例：

 


<html>
<head>
</head>
<body>
	 <h2>Brightness effect </h2>
	 <div>
			<h3 style="filter: brightness(120%); font-size: 2rem;">Brightness(120%)</h3>
			<img style="filter: brightness(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
	 </div>
	 <div>
			<h3 style="filter: brightness(0.38); font-size: 2rem;">Brightness(0.38)</h3>
			<h3>Brightness(120%)</h3>
			<img style="filter: brightness(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
	 </div>
	 <div>
			<h3>Brightness(0.38)</h3>
			<img style="filter: brightness(0.38); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
	 </div>
</body>
</html>

 

CSS 滤镜（filter） - contrast（）

contrast（） 函数用于为文本或图像添加对比效果。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 该值小于 100%，则降低对比度。
  • 值超过100%，增加对比度。
  • 值等于 0% 或 0，将使元素完全变灰。
  • 等于 100% 的值不起作用。
  • 默认值为 1。
  • 不允许使用负值。

下面是一个示例：


<html>
<head>
</head>
<body>
	 <h2>Contrast effect </h2>
	 <div>
			<h3 style="filter: contrast(20%); font-size: 2rem;">Contrast(120%)</h3>
			<img style="filter: contrast(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
	 </div>
	 <div>
			<h3 style="filter: contrast(0.5); font-size: 2rem;>Contrast(0.38)</h3>
			<h3>Contrast(120%)</h3>
			<img style="filter: contrast(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
	 </div>
	 <div>
			<h3>Contrast(0.38)</h3>
			<img style="filter: contrast(0.38); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
	 </div>
</body>
</html>

CSS 滤镜（filter） - 投影效果

阴影效果 是图像的模糊版本，在指定图像下方以特定颜色显示。

此属性类似于 box-shadow ，后者创建矩形阴影，而 drop-shadow 创建图像本身形状的阴影。

该函数可以将以下值作为参数：

offset-x:

  • 必需参数。
  • 阴影的水平偏移值。
  • 指定为 <length> 值。
  • 可以传递负值。将阴影放置在元素的左侧。

offset-y:

  • 必需参数。
  • 阴影的垂直偏移值。
  • 指定为 <length> 值。
  • 可以传递负值。将阴影置于元素上方。

blur-radius:

  • 可选参数。
  • 它是阴影的模糊半径。
  • 指定为 <length> 值。
  • 该值越大，模糊的阴影就越大。
  • 如果未指定任何值，则默认值为 0。阴影将是清晰且不模糊的。
  • 不允许使用负值。

color:

  • 可选参数。
  • 可以传递任何颜色值，例如颜色名称、十六进制值、RGB值等。

下面是一个示例：


<html>
<head>
</head>
<body>
	 <h2>Drop shadow effect</h2>
			<div style="margin-bottom: 1in;">
				 <h3 style="filter: drop-shadow(20px 20px 20px blue); font-size: 3rem;">with blur radius</h3>
				 <img style="filter: drop-shadow(20px 20px 20px blue);" width="200px;" height="200px;" src="images/white-flower.jpg" alt="drop-shadow effect">
			</div>
			<div>
				 <h3 style="filter: drop-shadow(1rem 1rem green); font-size: 3rem;">without blur radius</h3>
				 <img style="filter: drop-shadow(1rem 1rem green);" width="200px;" height="200px;" src="images/white-flower.jpg" alt="drop-shadow effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - grayscale（）

GrayScale（） 函数用于将输入图像转换为灰度。

该函数可以将以下值作为参数：

amount: 指定为 <number> 或 <percentage> 值。

  • 值等于 100%，使输入完全灰度化。
  • 值等于 0% 或 0，不会对输入进行任何更改。
  • 0% 到 100% 之间的值对效果具有线性乘数。
  • 如果未传递任何参数，则默认值为 1。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Grayscale effect</h2>
			<div>
				 <h3>grayscale - 0</h3>
				 <img style="filter: grayscale(0);" src="images/white-flower.jpg" alt="grayscale effect">
			</div>
			<div>
				 <h3>grayscale - 100</h3>
				 <img style="filter: grayscale(100);" src="images/white-flower.jpg" alt="grayscale effect">
			</div>
			<div>
				 <h3>grayscale - 70%</h3>
				 <img style="filter: grayscale(70%);" src="images/white-flower.jpg" alt="grayscale effect">
			</div>
			<div>
				 <h3>grayscale - 0.35</h3>
				 <img style="filter: grayscale(.35);" src="images/white-flower.jpg" alt="grayscale effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - hue-rotate（）

hue-rotate（） 函数用于旋转输入元素的色调及其内容。

该函数可以将以下值作为参数：

angle: 指定为<angle>值。

  • 角度（angle）值可以以递延、梯度、弧度或转弯形式传递。
  • 值等于 0deg，不会对输入进行任何更改。
  • 正色调旋转，增加色调值。
  • 负色调旋转，降低色调值。
  • 初始值为 0。

注意：除了CSS filter 属性外，hue-rotate（） 函数还可以与 CSS backdrop-filter 属性一起使用。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Hue-rotate effect</h2>
			<div>
				 <h3>hue-rotate - 0.8turn</h3>
				 <img style="filter: hue-rotate(0.8turn);" src="images/white-flower.jpg" alt="hue-rotate effect">
			</div>
			<div>
				 <h3>hue-rotate - 65deg</h3>
				 <img style="filter: hue-rotate(65deg);" src="images/white-flower.jpg" alt="hue-rotate effect">
			</div>
			<div>
				 <h3>hue-rotate - 200grad</h3>
				 <img style="filter: hue-rotate(200grad);" src="images/white-flower.jpg" alt="hue-rotate effect">
			</div>
			<div>
				 <h3>hue-rotate - 3.5rad</h3>
				 <img style="filter: hue-rotate(3.5rad);" src="images/white-flower.jpg" alt="hue-rotate effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - invert（）

invert（） 属性用于反转输入图像中的颜色。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 值等于 100%，使输入完全反转。
  • 值等于 0% 或 0，不会对输入进行任何更改。
  • 0% 到 100% 之间的值对效果具有线性乘数。
  • 初始值为 0。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Invert effect</h2>
			<div>
				 <h3>invert - 0</h3>
				 <img style="filter: invert(0);" src="images/white-flower.jpg" alt="invert effect">
			</div>
			<div>
				 <h3>invert - 65%</h3>
				 <img style="filter: invert(65%);" src="images/white-flower.jpg" alt="invert effect">
			</div>
			<div>
				 <h3>invert - .45</h3>
				 <img style="filter: invert(0.45);" src="images/white-flower.jpg" alt="invert effect">
			</div>
			<div>
				 <h3>invert - 100</h3>
				 <img style="filter: invert(100);" src="images/white-flower.jpg" alt="invert effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - opacity（）

opacity（） 函数用于向输入元素添加透明度。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 值等于 0%，使输入完全透明。
  • 值等于 100%，不会对输入进行任何更改。
  • 0% 到 100% 之间的值对效果具有线性乘数。
  • 初始值为 1。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Opacity effect</h2>
			<div style="border: 2px solid black; width: 250px; height: 250px;">
				 <h3 style="filter: opacity(20%);">opacity - 0%</h3>
				 <img style="filter: opacity(0%);" src="images/white-flower.jpg" alt="opacity effect">
			</div>
			<div>
				 <h3 style="filter: opacity(0.55);">opacity - 55%</h3>
				 <img style="filter: opacity(55%);" src="images/white-flower.jpg" alt="opacity effect">
			</div>
			<div>
				 <h3>opacity - 100</h3>
				 <img style="filter: opacity(100);" src="images/white-flower.jpg" alt="opacity effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - saturate（）

saturate（） 函数是 CSS 提供的内置函数，用于使输入图像过饱和或去饱和。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 该值低于 100%，则图像的饱和度完全降低。
  • 值超过 100%，使图像过饱和。
  • 值等于 0%，使图像完全不饱和。
  • 值等于 100%，对图像没有影响。
  • 初始值为 1。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Saturate effect</h2>
			<div>
				 <h3>saturate - 0%</h3>
				 <img style="filter: saturate(0%);" src="images/white-flower.jpg" alt="saturate effect">
			</div>
			<div>
				 <h3>saturate - 0.8</h3>
				 <img style="filter: saturate(0.8);" src="images/white-flower.jpg" alt="saturate effect">
			</div>
			<div>
				 <h3>saturate - 100%</h3>
				 <img style="filter: saturate(100%);" src="images/white-flower.jpg" alt="saturate effect">
			</div>
			<div>
				 <h3>saturate - 250%</h3>
				 <img style="filter: saturate(250%);" src="images/white-flower.jpg" alt="saturate effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - sepia（）

sepia（） 函数是 CSS 提供的内置函数，用于为输入图像添加棕褐色效果，看起来更明亮、更温暖。

该函数可以将以下值作为参数：

amount：指定为 <number> 或 <percentage> 值。

  • 值等于 0%，不起作用。
  • 值等于 100%，使图像完全棕褐色。
  • 初始值为 0。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Sepia effect</h2>
			<div>
				 <h3>sepia - 0%</h3>
				 <img style="filter: sepia(0%);" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
			<div>
				 <h3>sepia - 0.8</h3>
				 <img style="filter: sepia(0.8);" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
			<div>
				 <h3>sepia - 100%</h3>
				 <img style="filter: sepia(100%);" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
</body>
</html>

CSS 滤镜（filter） - URL（）

此外，filter 属性还支持 url() 函数，该函数允许您使用 SVG 滤镜元素应用滤镜效果。例如：


 filter: url(#myFilter);

当您想要应用内置滤镜函数不可用的更复杂的滤镜效果时，这非常有用。

下面是一个示例：


<html>
<head>
<style>
	 .myelement {
			filter: url(#pink-flower);
	 }
	 div {
			gap: 1.5rem;
			max-width: 300px;
			margin: 2em auto;
	 }
	 h3 {
			margin-top: 0.5rem;
	 }
	 img {
			width: 100%;
			max-height: 200px;
			object-fit: cover;
	 }
	 svg {
			height: 0;
	 }
</style>
</head>
<body>
	 <!-- SVG Filter effect -->
	 <svg xmlns="http://www.w3.org/2000/svg">
	 <defs>
	 <filter id="pink-flower" x="0" y="0" width="100%" height="100%">
	 <feComponentTransfer>
	 <feFuncR type="linear" slope="1" intercept="0.5"></feFuncR>
	 <feFuncG type="linear" slope="0.5" intercept="0.5"></feFuncG>
	 <feFuncB type="linear" slope="0" intercept="1"></feFuncB>
	 </feComponentTransfer>
	 </filter>
	 </defs>
	 </svg>
	 <!-- Rest of HTML -->
	 <div>
			<h3>filter: url() function</h3>
	 <div>
			<img src="images/pink-flower.jpg" alt="pink flower" />
	 </div>
	 <div>
			<img src="images/pink-flower.jpg" alt="blurred pink flower" class="myelement" />
	 </div>
	 </div>
</body>
</html>

CSS 滤镜（filter）的组合

可以在一个声明中使用多个 filter 函数。您只需要使用空格分隔每个函数。

注意：传递 filter 函数的顺序很重要，因为 filter 是按照声明的顺序应用的。例如，如果在棕褐色之后指定灰度函数，则图像将仅显示灰度。

下面是一个示例：


<html>
<head>
<style>
	 img {
			width:200px;
			height:200px;
	 }
</style>
</head>
<body>
	 <h2>Combination of filters</h2>
			<div>
				 <h3 style="filter: brightness(150) opacity(50%); font-size: 2rem;">sepia & saturate</h3>
				 <img style="filter: sepia(0%) saturate(120%);" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
			<div>
				 <h3 style="filter: contrast(150) opacity(50%); font-size: 2rem;>contrast & brightness</h3>
				 <img style="filter: contrast(0.8) brightness(150%);" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
			<div>
				 <h3 style="filter: brightness(20) contrast(10%); font-size: 2rem;">blur & drop-shadow</h3>
				 <img style="filter: blur(2px) drop-shadow(20px 20px 15px rgb(169, 8, 35));" src="images/orange-flower.jpg" alt="sepia effect">
			</div>
</body>
</html>
本页
上一页
下一页