css怎么使图片变暗些

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 属性，我们可以轻松地改变图片的明亮度或色彩模式。这些方法可以让我们更好地控制我们的图片，并将它们调整到我们需要的样子。