CSS Darken Image

使用 CSS 变暗图片是突出特定组件、添加叠加层或增强视觉吸引力的一种流行方法。它可以用于多种目的，例如使叠加的文本更容易阅读，添加微妙的背景效果，或突出图片的特定区域。为了提高文本和图形之间的对比度并保持内容的清晰度，在网页设计中经常使用变暗效果。

变暗图片的方法

在 CSS 中，可以通过多种方法实现图片变暗。以下是使用 CSS 分步指南：

1. 使用线性渐变叠加层

以下代码演示了使用线性渐变叠加层的方法来变暗图片。这是 Web 开发中非常流行的方法。

代码

输出

在此示例中，使用 `::before` 伪元素创建了一个从透明到半透明黑色的线性渐变叠加层。具有较低 alpha 值的叠加层会更暗。

2. 使用背景颜色叠加层

这是另一种使用叠加层的方法，但在此情况下，使用背景颜色而不是线性渐变。以下是使用 CSS 变暗图片的实现此方法的代码。

代码

输出

使用此方法，通过直接将 `background-color` 属性应用于图片容器来创建实色叠加层。再次，修改 `rgba(0, 0, 0, 0.5)` 值来调节黑暗程度。

选择最适合您的需求和风格偏好的方法。这些方法在不牺牲图片响应性或灵活性的情况下，能够很好地实现图片变暗。

3. 使用 filter 属性

这是使用 CSS 变暗图片的另一种方法，即使用 CSS 的 `filter` 属性配合 `brightness` 函数。`brightness` 函数可调节图片的亮度，将其设置为小于 100% 的值会使图片变暗。

代码

输出

在此，使用 `filter: brightness(0.5);` 行将亮度级别调整到 50%，从而使图片变暗。可以通过更改 `0.5` 值来控制黑暗级别。值越低，图片越暗。

此技术使用 `filter` 属性快速轻松地为图片添加黑暗效果。如果您正在寻找一种简单且可适应的 CSS 图片变暗方法，这是一个不错的选择。

结论

总之，本文介绍了三种有效的基于 CSS 的图片变暗技术。对于第一种，使用线性渐变叠加层创建从透明到半透明黑色的无缝过渡。

第二种方法使用 `background-color` 属性将实色叠加层直接应用于图片容器，通过更改 alpha 值，可以更精确地控制某个区域的明暗程度。第三种技术利用 `filter` 特性结合 `brightness` 函数，通过输入百分比即可轻松快速地修改图片的黑暗程度。

选择哪种方法取决于设计规范和审美偏好；不过，这些方法使设计师能够在不牺牲灵活性或响应性的情况下，创建出美观且引人注目的在线内容。