CSS filter属性

• 

  定义和用法

  filter属性定义元素（通常为<img>）的视觉效果（如模糊和饱和度）。

  特征	说明
  默认值	none
  继承	没有
  动画	有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.WebkitFilter="grayscale(100%)"尝试一下

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	IE/Edge	Chrome	FireFox	Safari	Opera
  属性名称
  filter	13.0	53.0 18.0 -webkit-	35.0	9.1 6.0 -webkit-	40.0 15.0 -webkit-

  注意：较旧版本的Internet Explorer（4.0到8.0）支持已弃用的非标准“filter”属性。当IE8需要支持时，这主要用于不透明度。
• 

  CSS语法

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

  实例

  将所有图像更改为黑白（100％灰色）：

  img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }

  尝试一下
• 

  属性值

  属性值	描述
  none	默认值。 指定无效果
  blur(px)	对图像应用模糊效果。 值越大，模糊越多。 如果未指定任何值，则使用0。
  brightness(%)	调整图像的亮度。 0％将使图像完全变黑。 100％（1）是默认值并代表原始图像。 超过100％的值将提供更明亮的结果。
  contrast(%)	调整图像的对比度。 0％将使图像完全变黑。 100％（1）是默认值并代表原始图像。 超过100％的值将提供对比度较低的结果。
  drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。 可能的值： h-shadow - 必填。指定水平阴影的像素值。负值将阴影置于图像的左侧。 v-shadow - 必填。指定垂直阴影的像素值。负值将阴影置于图像上方。 blur - 可选。这是第三个值，必须以像素为单位。为阴影添加模糊效果。值越大，模糊越多（阴影越大越亮）。不允许使用负值。如果未指定任何值，则使用0（阴影边缘清晰）。 spread - 可选。这是第四个值，必须以像素为单位。正值将导致阴影扩大并变大，负值将导致阴影缩小。如果未指定，则为0（阴影将与元素的大小相同）。 color - 可选。为阴影添加颜色。如果未指定，颜色取决于浏览器（通常为黑色）。 注意：Chrome，Safari和Opera以及其他浏览器不支持第4个参数;如果添加它将不会呈现。 创建红色阴影的示例，水平和垂直方向均为8px，模糊效果为10px： filter：drop-shadow(8px 8px 10px red); 提示：此过滤器类似于box-shadow属性。
  grayscale(%)	将图像转换为灰度。 0％（0）是默认值，表示原始图像。 100％将使图像完全变灰（用于黑白图像）。注意：不允许使用负值。
  hue-rotate(deg)	在图像上应用色调旋转。该值定义将调整图像样本的色环周围的度数。 0deg是默认值，表示原始图像。注意：最大值为360deg。
  invert(%)	反转图像中的样本。 0％（0）是默认值，表示原始图像。 100％将使图像完全反转。注意：不允许使用负值。
  opacity(%)	设置图像的不透明度级别。不透明度级别描述透明度级别，其中：0％是完全透明的。 100％（1）是默认值，表示原始图像（无透明度）。注意：不允许使用负值。提示：此过滤器类似于不透明度属性。
  saturate(%)	饱和图像。 0％（0）将使图像完全不饱和。 100％是默认值，表示原始图像。超过100％的值提供超饱和的结果。注意：不允许使用负值。
  sepia(%)	将图像转换为棕褐色。 0％（0）是默认值，表示原始图像。 100％将使图像完全棕褐色。注意：不允许使用负值。
  url()	url()函数获取指定SVG过滤器的XML文件的位置，并且可以包括到特定过滤器元素的锚。示例：filter：url（svg-url＃element-id）
  initial	将此属性设置为其默认值。查看initial关键字
  inherit	从其父元素继承此属性。查看inherit关键字

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：CSS图像