[分享]css3控制图片暗度

在网页设计中，图片的使用是非常常见的。但有时候我们希望图片显得更为柔和或者更加暗淡，这时候我们可以使用CSS3控制图片暗度。img { filter: brightness(50); } 上述CSS代...

在网页设计中，图片的使用是非常常见的。但有时候我们希望图片显得更为柔和或者更加暗淡，这时候我们可以使用CSS3控制图片暗度。

img {
  filter: brightness(50%);
} 

上述CSS代码中，我们使用了filter属性，brightness是其中的一个函数，函数的参数范围从0到1，数值越小，图片的亮度就越暗。在上述代码中，我们将图片的亮度调整为50%。

img {
  filter: contrast(50%);
} 

除了使用brightness函数控制图片的亮度，我们还可以使用contrast函数，来调整图片的对比度。contrast函数的参数范围也是0到1，数值越大，图片的对比度越强。

除了brightness和contrast之外，CSS3中还提供了其他多个函数，可以让我们更加精细地控制图片的暗度，例如saturate、grayscale等。

总之，使用CSS3控制图片暗度是非常简单而且有用的，您可以根据自己的需要选择不同的函数进行调整，让您的网页设计更加出色。