Question

使用图片可能比用文字解释得更好，所以请运行代码片段，看看我的意思是什么。使用图像编辑器时，我可以一次性调整图像的亮度和对比度，从而获得明亮清晰的图像。但是，使用CSS时，亮度和对比度会分两步依次更改，从而导致效果不佳。

是否可以同时调整CSS中的亮度和对比度？如有必要，也可以使用SVG或某种JavaScript解决方案。

Original:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250"><br>

GIMP - 63 brightness and contrast:<br>
<img src="https://i.imgur.com/Ba8PHk2.png" height="250"><br>

CSS - 2 brightness, 2 contrast:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: brightness(2) contrast(2);"><br>

CSS - 2 contrast, 2 brightness:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: contrast(2) brightness(2);">

Answer 1

我建议调整CSS filter的值，直到外观大致相同为止。我想不出一种更“科学”的方法，但我认为我在下面的代码段中使用的值非常接近您想要的值。

Original:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250"><br>

GIMP - 63 brightness and contrast:<br>
<img src="https://i.imgur.com/Ba8PHk2.png" height="250"><br>

CSS:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: brightness(1.53) contrast(1.19);"><br>

是否可以同时调整图像的亮度和对比度？

1 个答案: