Css 简明教程

CSS Filters - text-effect Property

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

在本章中，我们将详细讨论每个 CSS 过滤器并附带示例。

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

以下是可用于 filter 属性的函数列表：

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 - Drop Shadow Effect

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

此属性类似于创建矩形阴影的 * >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>* 值。角度值可以按度、梯度、弧度或周次传递。等于 0 度的值对输入不会产生任何改变。正色相旋转会增加色相值。负色相旋转会降低色相值。初始值为 0。

Note ：除了 filter CSS 属性之外， hue-rotate() 函数也可用于 * backdrop-filter* CSS 属性。

这是一个示例：

<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 - Combination of filters

一个声明中可以使用多个滤镜函数。你只需使用空格分隔每个函数即可。

Note ：传递滤镜函数的顺序非常重要，因为滤镜会按照声明它们的顺序应用。因此，例如，如果你在复古效果后指定灰度函数，则图像只会呈现灰度效果。

这是一个示例：

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