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 对象
