JavaScript HTML DOM Style filter 属性
-
filter 属性
filter属性为图像添加了视觉效果(如模糊和饱和度)。将图像颜色更改为黑白(100%灰度):
尝试一下// 标准语法 syntax document.getElementById("myImg").style.filter = "grayscale(100%)"; // Safari 6.0 - 9.0 document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
-
浏览器支持
项 IE/Edge Chrome FireFox Safari Opera 属性 filter 13.0+53.0+18.0 Webkit35.0+9.1+6.0 Webkit40.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()" -
属性值
值 描述 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)是默认值,表示原始图像(无透明度)。
注意:不允许使用负值。提示:此过滤器类似于不透明度属性。saturate(%) 使图像饱和。 - 0%(0)将使图像完全不饱和。
- 100%是默认值,表示原始图像。
- 超过100%的值提供超饱和的结果。
注意:不允许使用负值。sepia(%) 将图像转换为棕褐色。 - 0%(0)是默认值,表示原始图像。
- 100%将使图像完全棕褐色。
-
技术细节
项目 描述 CSS版本 CSS3 -
相关页面
CSS参考:filter 属性