如何用CSS轻松调整图片亮度，打造个性化暗色主题视觉效果

1. 使用filter属性

1.1 代码示例

.image-dark-theme {
  filter: brightness(0.7);
}

1.2 解释

2. 使用linear-gradient和mask-image

2.1 代码示例

.image-dark-theme {
  background-image: url('your-image.jpg');
  mask-image: linear-gradient(to bottom, transparent 50%, black 100%);
}

2.2 解释

3. 使用background-color和mix-blend-mode

3.1 代码示例

.image-dark-theme {
  background-image: url('your-image.jpg');
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
  mix-blend-mode: overlay;
}

3.2 解释

4. 使用JavaScript

4.1 代码示例

function adjustBrightness(element, factor) {
  element.style.filter = `brightness(${factor})`;
}

// 假设有一个id为'image'的图片元素
adjustBrightness(document.getElementById('image'), 0.8); // 调整亮度为80%

这段代码定义了一个adjustBrightness函数，它接受一个元素和一个亮度因子作为参数，并应用brightness滤镜。

总结