样式 filter 属性
描述
filter 属性为图像添加视觉效果(如模糊和饱和度)。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
筛选器 | 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
语法
返回 filter 属性
object.style.filter
设置 filter 属性
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
滤镜函数
注意: 使用百分比值(例如 75%)的滤镜也接受小数(例如 0.75)形式的值。
滤镜 | 描述 |
---|---|
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: 可选。为阴影添加颜色。如果未指定,颜色取决于浏览器(通常是黑色)。 提示: 此滤镜类似于 box-shadow 属性。 |
grayscale(%) | 将图像转换为灰度。 0% (0) 是默认值,表示原始图像。 100% 将使图像完全灰度(用于黑白图像)。 注意: 不允许负值。 |
hue-rotate(deg) | 对图像应用色相旋转。该值定义了图像样本将在色环上调整的度数。0deg 是默认值,表示原始图像。 注意: 最大值为 360deg。 |
invert(%) | 反转图像中的样本。 0% (0) 是默认值,表示原始图像。 100% 将使图像完全反转。 注意: 不允许负值。 |
opacity(%) | 设置图像的不透明度级别。不透明度级别描述了透明度级别,其中 0% 完全透明。 100% (1) 是默认值,表示原始图像(无透明度)。 注意: 不允许负值。 提示: 此滤镜类似于 opacity 属性。 |
saturate(%) | 饱和图像。 0% (0) 将使图像完全不饱和。 100% 是默认值,表示原始图像。 值超过 100% 将提供超饱和的图像。 注意: 不允许负值。 |
sepia(%) | 将图像转换为棕褐色。 0% (0) 是默认值,表示原始图像。 100% 将使图像完全棕褐色。 注意: 不允许负值。 |
技术详情
CSS 版本 | CSS3 |
---|
相关页面
CSS 参考: filter 属性