如何使 html 中的图像变暗（而非 css）

Question

尝试使用 html 使图像变暗。

我找到了您使用 css 'background-image;和 'linear-gradient'，但是我想知道是否有办法在 html 中的 'img' 标签上执行此操作。如果没有，那么我应该将所有这些图像转换为背景图像吗？ pros/cons 使用 html img 与 css background-image 有什么区别？

Answer 1

使用filter:

.darken {
  filter: brightness(0.4);
}

<img src="https://picsum.photos/id/1/200/300">

<img src="https://picsum.photos/id/1/200/300" class="darken">

<img src="https://picsum.photos/id/1/200/300" style="filter: brightness(0.2);">

Answer 2

HTML img 标签上没有使图像变暗的属性。

https://www.w3schools.com/tags/tag_img.asp

如果您考虑的是 style 标记，那是内联 CSS，所以您实际上并没有做任何不同的事情。

使用 CSS，您实际上可以控制图像变暗的方式，而不是仅仅假设浏览器会为您正确执行。它在一个浏览器中的样子在另一个浏览器中不太可能相同。可能是，但这可能只是巧合，您不能依赖它来获得未来的兼容性。

Answer 3

如果我没记错的话，你不能使用纯 html 改变任何东西的颜色属性，而且我不明白为什么有人会在 [=29= 时这样做] 几乎无处不在。

当您的图像是内容的一部分时，您应该使用 <img>。如果这张图片很重要，请不要忘记替代文字。
如果您的图像不是内容的一部分，或者您不希望默认情况下用户打印时显示您的图像，您应该使用背景图像。

有关更多信息，请参考这个 SO 问题：When to use IMG vs. CSS background-image?

现在，要使图像变暗，您可以执行以下操作：

img {
  filter: brightness(50%);
}

Answer 4

我不认为有一种方法可以在不使用 CSS 的情况下使 html 中的图像变暗。

根据我的经验，html <img> 标签和 css background-image 标签之间的区别在于第一个标签的语义值。

澄清一下：当您的图像是内容的一部分时使用 <img> 标签，这样图像将更好地被搜索引擎编入索引。当您的图像是界面或装饰的一部分时，请改用 css background-image。 Web 浏览器也可以在某些情况下隐藏背景图像，例如 Safari reader 模式。

Answer 5

如果您绝对不能使用任何 CSS，您可以将图像放在带有滤镜的 SVG 元素中。在此示例中，我使用颜色矩阵滤镜来实现 20% 的亮度。

<svg>
  <filter id="darken">
    <feColorMatrix 
      type="matrix"
      in="SourceGraphic"
      values="0.2 0 0 0 0
              0 0.2 0 0 0
              0 0 0.2 0 0
              0 0 0 1 0" />
  </filter>
  <image filter="url(#darken)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Vista_de_Baku%2C_Azerbaiy%C3%A1n%2C_2016-09-26%2C_DD_138.jpg/800px-Vista_de_Baku%2C_Azerbaiy%C3%A1n%2C_2016-09-26%2C_DD_138.jpg" />
</svg>

如何使 html 中的图像变暗（而非 css）

How to darken an image in html (not css)

html

css

image

background-image

linear-gradients