CSS filter 属性

上一页
下一页

CSS filter 属性应用图形效果，例如模糊、亮度、对比度等等，到元素上。它允许我们操作元素的显示方式，而不会改变其底层内容或结构。

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

属性值

值 描述
none 指定无效果。默认值。
blur(px) 应用图像模糊效果。值越大，模糊效果越明显。默认为 0。
brightness(%) 调整图像亮度。0% 会导致图像变黑，100% 为默认值，显示原始图像。
contrast(%) 调整图像对比度。0% 会导致图像变黑，100% 为默认值，显示原始图像。
drop-shadow(offset-x, offset-y, blur-radius, color) 为元素应用投影效果。
  • offset-x: 指定阴影相对于元素的水平距离。正值使阴影向右移动，负值使阴影向左移动。
  • offset-y: 指定阴影相对于元素的垂直距离。正值使阴影向下移动，负值使阴影向上移动。
  • blur-radius: 定义阴影的模糊半径。值越大，阴影越模糊；值越小，阴影越清晰。
  • color: 设置阴影的颜色。可以是命名颜色、十六进制代码、RGB、RGBA、HSL 或 HSLA 值。
grayscale(%) 将图像转换为灰度图像。0% 为默认值，表示原始图像；100% 为灰度图像。不允许使用负值。
hue-rotate(deg) 应用色相旋转。指定角度会根据颜色圆上的角度调整图像。0deg 为默认值，表示原始图像；360deg 为最大值。
invert(%) 反转图像。0% 为默认值，表示原始图像；100% 会导致图像完全反转。不允许使用负值。
opacity(%) 控制图像的透明度。0% 表示完全透明的图像；100% 为默认值，表示原始图像（不透明）。不允许使用负值。
saturate(%) 饱和图像。0% 表示不饱和的图像；100% 为默认值，表示原始图像。不允许使用负值。
sepia(%) 将图像转换为棕褐色。0% 为默认值，表示原始图像；100% 为棕褐色图像。不允许使用负值。
url() 获取指定 SVG 滤镜的 XML 文件位置，可能包含指向特定滤镜元素的锚点。例如：filter: url(svg-url#element-id)。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

CSS filter 属性示例

以下示例解释了具有不同值的filter 属性。

使用 none 函数的 filter 属性

为了不对元素产生任何影响，我们使用none 值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: none;
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: none
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
</body>

</html>

使用 blur 函数的 filter 属性

为了在元素中引入模糊效果，我们使用blur() 函数。我们以像素为单位指定模糊值。值越大，模糊效果越明显。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: blur(5px);
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: blur(5px)
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image"
   width="200" height="200"/>

</body>

</html>

使用 brightness 函数的 filter 属性

为了调整元素的亮度，我们使用brightness() 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: brightness(30%);
      }

      #filter2 {
         filter: brightness(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: brightness(30%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: brightness(60%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 contrast 函数的 filter 属性

为了调整元素的暗度，我们使用contrast 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: contrast(20%);
      }

      #filter2 {
         filter: contrast(55%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: contrast(20%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: contrast(55%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 drop-shadow 函数的 filter 属性

为了向元素添加背景阴影，我们使用drop-shadow() 函数。我们以像素和颜色格式指定值。它最多可接受 4 个值。第一个值是 x 偏移量，第二个值是 y 偏移量，第三个是模糊半径，第四个是阴影的颜色。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
         gap: 10px;
      }

      #filter1 {
         filter: drop-shadow(15px 20px 15px grey);
      }

      #filter2 {
         filter: drop-shadow(40px 40px 40px red);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: drop-shadow (15px 20px 15px grey)
      </h4>
      <img src="/css/images/content.png" alt="image" 
         width="250" height="250" id="filter1" />
      <h4>
         filter: drop-shadow (40px 40px 40px red)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>


</body>

</html>

使用 grayscale 函数的 filter 属性

为了突出元素中的黑白特征，我们使用grayscale() 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: grayscale(65%);
      }

      #filter2 {
         filter: grayscale(100%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: grayscale(45%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: grayscale(100%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 hue-rotate 函数的 filter 属性

为了通过旋转色相角来调整元素颜色的色相，我们使用hue-rotate() 函数。我们以度为单位指定值。度值指定围绕色轮的旋转角度，这会创建各种颜色效果和变换。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: hue-rotate(75deg);
      }

      #filter2 {
         filter: hue-rotate(35deg);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: hue-rotate(75deg)
      </h4>
      <img src="/css/images/content.png" alt="image" width="250" height="250" id="filter1" />
      <h4>
         filter: hue-rotate(35deg)
      </h4>
      <img src="/css/images/content.png" alt="image" width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" width="200" height="200" />

</body>

</html>

使用 opacity 函数的 filter 属性

为了调整元素的透明度，我们使用opacity() 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: opacity(35%);
      }

      #filter2 {
         filter: opacity(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: opacity(35%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: opacity(60%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 saturate 函数的 filter 属性

为了调整元素的颜色饱和度，我们使用saturate() 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: saturate(25%);
      }

      #filter2 {
         filter: saturate(65%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: saturate(25%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: saturate(65%
      )</h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 sepia 函数的 filter 属性

为了向元素应用棕褐色调，使其呈现类似于旧照片的温暖的棕色外观，我们使用sepia() 函数。我们以百分比为单位指定值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: sepia(45%);
      }

      #filter2 {
         filter: sepia(90%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: sepia(45%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: sepia(90%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 filter URL 的 filter 属性

为了将外部 SVG 滤镜应用于元素，以便我们可以使用在 SVG 文件中定义的自定义滤镜效果（可以包含诸如颜色调整、模糊和失真之类的复杂效果），我们必须在url() 中指定滤镜的 id。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .myelement {
         filter: url(#pink-flower);
      }

      div {
         display: grid;
         gap: 10px;
         max-width: 300px;
      }

      img {
         width: 100%;
         max-height: 200px;
         object-fit: cover;
      }

      svg {
         height: 0;
      }
   </style>
</head>

<body>
   <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>
   <h2>
      CSS filter property
   </h2>
   <h3>
      filter: url() function
   </h3>
   <div>
      <img src="/css/images/content.png" 
      alt="pink flower" />
      <img src="/css/images/content.png" 
      alt="blurred pink flower" class="myelement" />
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
filter 53.0 13.0 35.0 9.1 40.0
css_properties_reference.htm
打印页面
上一页
下一页
广告