Css 简明教程

CSS Filters - text-effect Property

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

CSS provides an extremely powerful tool that can help in addition of special visual effects to text, images, background, borders, etc. The filters are useful in adjusting the rendering of these aspects of a webpage.

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

In this chapter, we will discuss about each CSS filter in detail with examples.

  1. The filter property can have value as none or one or more functions listed later in the chapter.

  2. If no or an invalid parameter is passed to any function, it returns none.

  3. The functions that accept the parameter value in percentage (%), also accepts the same value expreseed in decimal. For example, 55% can be passed as 0.55

  4. Multiple functions can be passed to filter property; just that you need to add space between them.

  5. When multiple functions is passed, these filters are applied in the order they are passed.

  6. The same filter function can be repeated. For example: filter:blur(20px) hue-rotate(45deg) blur(15px).

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

Following is the list of functions that can be used with filter property:

CSS filter - blur()

blur() 函数用于向文本或图像添加模糊效果。

The blur() function is used to add blur effects to the text or an image.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. blur radius: specified as a <length> value. The greater the value, more will be the blur effect. Default value is 0. The function does not accept percentage value.

这是一个示例：

Here is an example:

<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() 函数用于通过应用线性乘数值来向文本或图像添加亮度效果。这会使元素看起来更亮或更暗。

brightness() function is used to add brightness effect to the text or an image, by applying a linear multiplier value. This makes the element look brighter or darker.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value less than 100%, makes the element darker. Value over 100%, makes the element bright. Value equal to 100% have no effect. Default value is 1. Negative values are not allowed.

这是一个示例：

Here is an example:

<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() 函数用于向文本或图像添加对比度效果。

contrast() function is used to add contrast effect to the text or an image.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value less than 100%, decreases the contrast. Value over 100%, increases the contrast. Value equal to 0% or 0, will make the element fully gray. Value equal to 100% have no effect. Default value is 1. Negative values are not allowed.

这是一个示例：

Here is an example:

<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

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

Drop Shadow is a blurred version of the image, shown in a particular color below the specified image.

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

This property is similar to >box-shadow, which creates a rectangular shadow, whereas drop-shadow creates a shadow that is of the shape of the image itself.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. offset-x: Required parameter. Horizontal offset value for shadow. Specified as <length> value. Negative values can be passed. Places the shadow to left of element.

  2. offset-y: Required parameter. Vertical offset value for shadow. Specified as <length> value. Negative values can be passed. Places the shadow above the element.

  3. blur-radius: Optional parameter. It is shadow’s blur radius. Specified as <length> value. Larger the value, bigger is the blurred shadow. Default is 0, if no value specified. The shadow will be sharp and unblurred. Negative values not allowed.

  4. color: Optional parameter. Any color value can be passed, such as color name, hex value, rgb value, etc.

这是一个示例：

Here is an example:

<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() 函数用于将输入图像转换为灰度。

grayscale() function is used to convert the input image to grayscale.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value equal to 100%, makes the input fully grayscale. Value equal to 0% or 0, will make no change to the input. Value between 0% and 100% have linear multipliers on the effect. Default value is 1, if no parameter is passed.

这是一个示例：

Here is an example:

<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() 函数用于旋转输入元素及其内容的色相。

hue-rotate() function is used to rotate the hue of an input element and its contents.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. angle: specified as an <angle> value. Angle value can be passed in degress, gradians, radians, or turns. Value equal to 0deg, will make no change to the input. Positive hue rotation, increases hue value. Negative hue rotation, decreases hue value. Initial value is 0.

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

Note: The hue-rotate() function can be used with backdrop-filter CSS property, apart from the filter CSS property.

这是一个示例：

Here is an example:

<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() 属性用于反转输入图像中的颜色。

The invert() property is used to invert the color in the input image.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value equal to 100%, makes the input fully inverted. Value equal to 0% or 0, will make no change to the input. Value between 0% and 100% have linear multipliers on the effect. Initial value is 0.

这是一个示例：

Here is an example:

<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() 函数用于向输入元素添加透明度。

The opacity() function is used to add transparency to the input element.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value equal to 0%, makes the input fully transparent. Value equal to 100%, will make no change to the input. Value between 0% and 100% have linear multipliers on the effect. Initial value is 1.

这是一个示例：

Here is an example:

<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 提供的内置函数，用于对输入图像进行超饱和或去饱和。

The saturate() function is an inbuilt function provided by CSS and is used to super-saturate or desaturate the input image.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value under 100%, fully desaturates the image. Value over 100%, super-saturates the image. Value equal to 0%, makes the image completely unsaturated. Value equal to 100%, has no effect on the image. Initial value is 1.

这是一个示例：

Here is an example:

<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 提供的内置函数，用于向输入图像添加复古效果，这种效果看上去更明亮、更温暖。

The sepia() function is an inbuilt function provided by CSS and is used to add sepia effect to the input image, which is a more brighter and warmer look.

该函数的下列值可作为参数：

The function can have following value as parameter:

  1. amount: specified as a <number> or a <percentage> value. Value equal to 0%, has no effect. Value equal to 100%, makes the image completely sepia. Initial value is 0.

这是一个示例：

Here is an example:

<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 滤镜元素应用滤镜效果。例如：

Additionally, the filter property also supports the url() function, which allows you to apply a filter effect using an SVG filter element. For example:

filter: url(#myFilter);

这在希望应用内置滤镜函数中不可用的更为复杂的滤镜效果时非常有用。

This is useful when you want to apply more complex filter effects that are not available with the built-in filter functions.

这是一个示例：

Here is an example:

<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

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

Multiple filter functions can be used in one declaration. You just need to separate each function using a space.

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

Note: The order in which you pass the filter functions is important, as the filters are applied in the order they are declared. So for example, if you specify grayscale function after sepia, the image will look grayscale only.

这是一个示例：

Here is an example:

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