Question

我正在尝试降低图像的亮度，并且基本上使其变暗，我正在尝试使用滤镜：亮度，但由于某种原因，图像根本没有变暗。我从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'>

Answer 1

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

-webkit-filter: brightness(50%);

可能就是你要找的东西。

Answer 2

请勿在过滤器中使用百分比。它应该是从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

过滤器亮度不起作用，CSS

2 个答案: