←CSS fill属性
CSS :first-child 伪类→

CSS filter 属性值说明

值描述
none不适用于效果。这是此属性的默认值。
blur在图像上应用迷离。它由px指定。值越大，将应用更多的模糊。如果没有应用值，则使用0。
brightness使图像更亮。如果值为0，则图像将是黑色的。 100％是默认值并显示原始图像。图像超过100％图像将变得更加光明。
contrast调整图像的对比度。如果值为0，则图像将是黑色的。 100％是默认值并显示原始图像。超过100％的比较值将应用于图像。
drop-shadow在图像上应用丢弃阴影效果。
grayscale将图像更改为灰度。 0％是原始图像的值。 100％使图像灰色。不允许使用负值。
hue-rotate在图像上施加色调旋转效果。它由学位指定。最大值为360度。
invert反转图像中的示例。 0％是默认值。 100％使图像完全倒置。
opacity设置图像的不透明度级别。它描述了图像的透明度。如果图像具有0％值，则它是完全透明的。 100％是图像的当前状态。
saturate应用饱和效果对图像。 0％使图像完全没有饱和。 100％是图像的默认值。超过100％的值使图像超饱和。
sepia将图像转换为Sepia.Default值为0％，100％使图像完全棕褐色。
urlURL函数占用指定SVG过滤器的XML文件的位置，并且可以包括特定滤波器元素的锚。
initial使属性使用其默认值。
inherit从父母元素继承属性。
CSS filter属性

filter 属性用于将视觉效果应用于元素（图像）。

过滤器属性具有以下值：

  • none
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia
  • url
初始值none
应用于表格的单元格元素。
继承无效
可动画的是的。
版本CSS3.
DOM 语法object.Style.WebkitFilter =“Hue-Rotalate（360deg）”;

语法

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

过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
        filter: blur(3px);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter 属性示例</h2>
    <p>For this image the filter is set to "blur(3px)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

使用 filter 属性使图像更亮的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: brightness(150%); /* Safari 6.0 - 9.0 */
        filter: brightness(150%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter 属性示例</h2>
    <p>For this image the filter is set to "brightness(150%)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

在以下示例中，“灰度”值使图像变灰：

具有“灰度”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
        filter: grayscale(80%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

其中“饱和”过滤器应用于给定值为 300% 的图像。

具有“saturate”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: saturate(300%); /* Safari 6.0 - 9.0 */
        filter: saturate(300%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "saturate(300%)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

具有“sepia”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: sepia(70%); /* Safari 6.0 - 9.0 */
        filter: sepia(70%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "sepia(70%)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

具有“对比度”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: contrast(40%); /* Safari 6.0 - 9.0 */
        filter: contrast(40%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "contrast(40%)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

具有“不透明度”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: opacity(0.4);  /* Safari 6.0 - 9.0 */
        filter: opacity(0.4);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "opacity(0.4)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

具有“invert”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: invert(0.7); /* Safari 6.0 - 9.0 */
        filter: invert(0.7);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "invert(0.7)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>

具有“hue-rotate”值的过滤器属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        -webkit-filter: hue-rotate(90deg); /* Safari 6.0 - 9.0 */
        filter: hue-rotate(90deg);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "hue-rotate(90deg)".</p>
    <p>
      <img src="/onitroad.jpeg" alt="Background Image">
    </p>
  </body>
</html>
日期：2020-06-02 22:14:29 来源：oir作者：oir
←CSS fill属性
CSS :first-child 伪类→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策