Style filter 属性
定义和用法
filter 属性为图像添加视觉效果(如模糊和饱和度)。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
后跟 Webkit 的数字指定使用前缀的第一个版本。
属性 | |||||
---|---|---|---|---|---|
filter | 53.0 18.0 Webkit |
13.0 | 35.0 | 9.1 6.0 Webkit |
40.0 15.0 Webkit |
语法
返回 filter 属性:
object.style.filter
设置 filter 属性:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Filter Functions
注释: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
Filter | 描述 |
---|---|
none | 默认值,没有效果。 |
blur(px) | 对图像应用模糊效果。值越大越模糊。 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。 |
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,也许还有其他浏览器,都不支持第四个长度;如果添加,它将不会渲染。 color: 可选。为阴影添加颜色。如果未指定,则颜色取决于浏览器(通常为黑色)。 提示: 此过滤器类似于 box-shadow 属性。 |
grayscale(%) | 将图像转换为灰度。 0% (0) 默认值,表示原始图像。 100% 将使图像完全变成灰色(用于黑白图像)。 注释: 不允许使用负值。 |
hue-rotate(deg) | 在图像上应用色调旋转。该值定义了图像采样将调整的颜色圈周围的度数。默认为0度,表示原始图像。
注释: 最大值为360度。 |
invert(%) | 反转图像中的采样。 0% (0) 默认值,表示原始图像。 100% 将使图像完全反转。 注释: 不允许使用负值。 |
opacity(%) | 设置图像的不透明度级别。不透明度级别描述透明度级别,其中: 0% 是完全透明的。 100% (1) 是默认值,表示原始图像(无透明度)。 注释: 不允许使用负值。 提示: 此过滤器类似于 opacity 属性。 |
saturate(%) | 使图像饱和。 0% (0) 将使图像完全不饱和。 100% 是默认值,代表原始图像。 超过100%的值可提供超饱和结果。 注释: 不允许使用负值。 |
sepia(%) | 将图像转换为深褐色。 0% (0) 默认值,表示原始图像。 100% 将使图像完全暗褐色。 注释: 不允许使用负值。 |
技术细节
CSS 版本 | CSS3 |
---|
相关页面
CSS 参考手册: filter 属性
❮ Style 对象