过滤器亮度不起作用,CSS

时间:2015-07-10 02:29:56

标签: html css

我正在尝试降低图像的亮度,并且基本上使其变暗,我正在尝试使用滤镜:亮度,但由于某种原因,图像根本没有变暗。我从1%开始,一路走到100%,但图像并没有变得更暗。我不知道我做错了什么。请看一下我的代码:

img {
    filter: brightness(50%);
    width: 200px;
    height: 200px;
}

<img src = 'https://static.pexels.com/photos/3164/sea-black-and-white-water-ocean.jpg'>

2 个答案:

答案 0 :(得分:1)

据推测,您的浏览器不支持开箱即用的规格。您应该添加供应商前缀以使其在这种情况下起作用。

-webkit-filter: brightness(50%);

可能就是你要找的东西。

答案 1 :(得分:0)

请勿在过滤器中使用百分比。它应该是从0到1的范围。

img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}

0.5将等于50%

https://github.com/liuhuibin/TaoBaoProgressBar/blob/master/.raw/q.png

filter: brightness(0.4);     // Does not use percentage
filter: contrast(200%);      // Uses percentage