首页 > Web前端 > css3基础

CSS filter 属性详解

css3基础 2022-07-14 16:09:51小码哥的IT人生shichen

CSS filter 属性

定义和用法

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

另请参阅：

CSS 教程：CSS 图像

HTML DOM 参考手册：filter 属性

实例

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

img {
  filter: grayscale(100%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

提示：可以在页面下方找到更多 TIY 实例。

CSS 语法

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

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

技术细节

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

滤镜函数

注释：使用百分比值（例如 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。

更多实例

模糊实例

为图像添加模糊效果：

img {
  filter: blur(5px);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

模糊实例 2

应用模糊的背景图片：

img.background {
  filter: blur(35px);
}

完整实例【亲自试一试】：

<!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="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="circle" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

亮度实例

调整图像的亮度：

img {
  filter: brightness(200%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

对比度实例

调整图像的对比度：

img {
  filter: contrast(200%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

阴影实例

为图像应用阴影效果：

img {
  filter: drop-shadow(8px 8px 10px gray);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

灰阶实例

将图像转换为灰阶：

img {
  filter: grayscale(50%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

色相旋转实例

在图像上应用色相旋转：

img {
  filter: hue-rotate(90deg);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

反转实例

反转图像中的样本：

img {
  filter: invert(100%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

不透明度实例

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

img {
  filter: opacity(30%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

饱和度实例

调整图像的饱和度：

img {
  filter: saturate(800%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

棕褐色实例

将图像转换为棕褐色：

img {
  filter: sepia(100%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

使用多重滤镜

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

img {
  filter: contrast(200%) brightness(150%);
}

完整实例【亲自试一试】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

所有滤镜

演示所有滤镜函数：

.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);
}

完整实例【亲自试一试】：

<!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="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="blur" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="brightness" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="contrast" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="grayscale" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="huerotate" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="invert" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="opacity" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="saturate" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="sepia" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<img class="shadow" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

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

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

Chrome	IE / Edge	Firefox	Safari	Opera
53.0 18.0 -webkit-	13.0	35.0	9.1 6.0 -webkit-	40.0 15.0 -webkit-

注释：较旧版本的 Internet Explorer（4. 0到 8.0）支持已弃用的非标准 "filter" 属性。当需要 IE8 及更低版本的支持时，主要用于不透明度。

上一篇CSS empty-cells 属性详解下一篇CSS flex 属性详解

CSS filter 属性 详解

CSS filter 属性

定义和用法

另请参阅：

实例

完整实例【亲自试一试】：

CSS 语法

技术细节

滤镜函数

更多实例

模糊实例

完整实例【亲自试一试】：

模糊实例 2

完整实例【亲自试一试】：

亮度实例

完整实例【亲自试一试】：

对比度实例

完整实例【亲自试一试】：

阴影实例

完整实例【亲自试一试】：

灰阶实例

完整实例【亲自试一试】：

色相旋转实例

完整实例【亲自试一试】：

反转实例

完整实例【亲自试一试】：

不透明度实例

完整实例【亲自试一试】：

饱和度实例

完整实例【亲自试一试】：

棕褐色实例

完整实例【亲自试一试】：

使用多重滤镜

完整实例【亲自试一试】：

所有滤镜

完整实例【亲自试一试】：

浏览器支持

相关阅读

tags标签云

Web前端栏目导航

最新文章

热门文章

CSS filter 属性详解