CSS filter 属性

实例

把所有图像都改为黑白（100% 灰色）：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: grayscale(100%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>将图像转换为灰阶：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

定义和用法

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

默认值：	none
继承：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.filter="grayscale(100%)"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 的数字表示使用前缀的首个版本。

属性
filter	53.018.0 -webkit-	13.0	35.0	9.16.0 -webkit-	40.015.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();

提示：如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

滤镜函数

注释：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％将提供更明亮的结果。
contrast(%)	调整图像的对比度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。可能的值： h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 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(%)	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中： 0% 为完全透明。 100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。
saturate(%)	设置图像的饱和度。 0% (0) will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. 注释：不允许负值。
sepia(%)	将图像转换为棕褐色。 0% (0) 是默认值，代表原始图像。 100％将使图像完全变为棕褐色。注释：不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例： filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

更多实例

模糊实例

为图像添加模糊效果：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: blur(5px);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>对图像应用模糊效果：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

模糊实例 2

应用模糊的背景图片：

<!DOCTYPE html>
<html>
<head>
<style>
img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}
img.circle {
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 60%;
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>背景模糊：</p>
<img class="background" src="/images/pineapple.jpg" width="300" height="300">
<img class="circle" src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

亮度实例

调整图像的亮度：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: brightness(200%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>调整图像的亮度：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

对比度实例

调整图像的对比度：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: contrast(200%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>调整图像的对比度：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

阴影实例

为图像应用阴影效果：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: drop-shadow(8px 8px 10px gray);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>对图像应用阴影效果：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

灰阶实例

将图像转换为灰阶：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: grayscale(50%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>将图像转换为灰阶：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

色相旋转实例

在图像上应用色相旋转：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>在图像上应用色相旋转：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

反转实例

反转图像中的样本：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: invert(100%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>反转图像中的样本：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

不透明度实例

设置图像的不透明度级别：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: opacity(30%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>更改图像的不透明度级别：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

饱和度实例

调整图像的饱和度：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: saturate(800%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>提高图像饱和度：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

棕褐色实例

将图像转换为棕褐色：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: sepia(100%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>将图像转换为棕褐色：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

使用多重滤镜

要使用多个滤镜，请用空格分隔每个滤镜。请注意，顺序很重要（例如在 sepia() 之后使用 grayscale() 将产生完全灰色的图像）：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>
<h1>filter 属性</h1>
<p>调整图像的对比度和亮度：</p>
<img src="/images/pineapple.jpg" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

所有滤镜

演示所有滤镜函数：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(0.30);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h1>filter 属性</h1>
<img src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

运行一下

CSS filter 属性

实例

定义和用法

浏览器支持

CSS 语法

滤镜函数

更多实例

模糊实例

模糊实例 2

亮度实例

对比度实例

阴影实例

灰阶实例

色相旋转实例

反转实例

不透明度实例

饱和度实例

棕褐色实例

使用多重滤镜

所有滤镜

相关页面

分类导航