小码哥的IT人生

Style filter 属性 详解

css3基础 2023-07-30 02:24:13小码哥的IT人生shichen

Style filter 属性

定义和用法

filter 属性为图像添加视觉效果(如模糊和饱和度)。

另请参阅:

CSS 参考手册:filter 属性

实例

将图像的颜色更改为黑白(100% 灰度):

document.getElementById("myImg").style.filter = "grayscale(100%)";

 

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

<!DOCTYPE html>
<html>
<body>
<p>点击该按钮可将图像的颜色更改为黑白(100% 灰)。</p>
<button onclick="myFunction()">试一试</button><br><br>
<img id="myImg" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<p><b>注释:</b>filter 属性在 Internet Explorer 或 Edge 12 中不起作用。</p>
<script>
function myFunction() {
  document.getElementById("myImg").style.filter = "grayscale(100%)";
}
</script>
</body>
</html>

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

语法

返回 filter 属性:

object.style.filter

设置 filter 属性:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter 函数

注释:使用百分比值(如 75%)的 filter 也接受十进制值(即 0.75)。

Filter 描述
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(阴影将与元素大小相同)。

注释:Chrome、Safari 和 Opera,可能还有其他浏览器,不支持第 4 种长度;如果添加,它将不会呈现。

color:可选。为阴影添加颜色。如果未规定,颜色取决于浏览器(通常为黑色)。

提示:此 filter 类似于 box-shadow 属性。

grayscale(%)

将图像转换为灰度。

0% (0) 是默认值,表示原始图像。

100% 将使图像完全变灰(用于黑白图像)。

注释:不允许负值。

hue-rotate(deg)

在图像上应用色调旋转。该值定义图像样本将被调整的围绕色环的度数。

0deg 是默认值,表示原始图像。

注释:最大值为 360 度。

invert(%)

反转图像中的样本。

0% (0) 是默认值,表示原始图像。

100% 将使图像完全反转。

注释:不允许负值。

opacity(%)

设置图像的不透明度级别。不透明度级别描述了透明度级别,其中:

0% 是完全透明的。

100% (1) 是默认值,表示原始图像(无透明度)。

注释:不允许负值。

提示:此 filter 类似于 opacity 属性。

saturate(%)

调整图像饱和度。

0% (0) 将使图像完全不饱和。

100% 是默认值,表示原始图像。

超过 100% 的值会提供过饱和的结果。

注释:不允许负值。

sepia(%)

将图像转换为棕褐色。

0% (0) 是默认值,表示原始图像。

100% 会使图像完全呈棕褐色。

注释:不允许负值。

技术细节

CSS 版本: CSS3

浏览器支持

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024