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 Webkit
    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()"
  • 属性值

    描述
    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 属性