1. 介绍
有时候，我们需要将网站中的图片调整为不同的亮度或色彩模式。本文将会讨论如何使用CSS将图片变暗的方法。
1.1 预备知识
在进行本文的演示之前，我们需要了解以下两个CSS知识点：
opacity：可设置元素的透明度，取值范围为 0（完全透明）到 1（完全不透明）。如下所示：
img {
opacity: 0.5; // 图片透明度为50%
}
filter：通过对元素施加高级滤镜来处理元素的外观。其中的 filter-function 可接受的值包括 blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert()，opacity(), saturate(), sepia()等。如下所示：
img {
filter: brightness(0.8); // 图片亮度减少20%
}
2. 图片变暗的方法
有两种方法可以使用CSS将图片变暗。下面将详细介绍这两种方法。
2.1 使用 opacity 属性
我们可以使用 opacity 属性减弱图片的明亮度，并将其变暗。下面是一个简单的方法，演示如何使用 opacity 属性来减弱图片的亮度：
img {
opacity: 0.6; // 图片明亮度减少40%
}
解释：
通过使用 opacity 属性，我们可以将图片的亮度减少40%。在这个例子中，图片的 opacity 属性设置为0.6，这意味着图片的明亮度减少了40%。
2.2 使用 filter 属性
我们还可以使用 filter 属性来改变图片的色彩模式。下面是一个演示，展示如何使用 filter 属性来减弱图片的亮度：
img {
filter: brightness(0.6); // 图片亮度减少40%
}
解释：
通过使用 filter 属性，我们可以改变图片的色彩模式。在这个例子中，我们将 filter 属性设置为 brightness(0.6) ，这将会使图片的亮度减少40%。
3.总结
通过使用 opacity 属性或 filter 属性，我们可以轻松地改变图片的明亮度或色彩模式。这些方法可以让我们更好地控制我们的图片，并将它们调整到我们需要的样子。