使用 CSS 使图像变暗（任何形状）答案

【问题标题】：Darkening an image with CSS (In any shape)使用 CSS 使图像变暗（任何形状）
【发布时间】：2013-03-23 19:58:33
【问题描述】：

所以我已经看到了很多使用 CSS 使图像变暗的方法，包括圆角的方法，但我的问题是不同的。

假设我有一个看起来像小狗的 .png 图像（随它去吧，我没有任何好的例子），当我将它放在我的页面上时，我给它的尺寸为 100 x 100。

但我不能只是在上面叠加一些东西，或者给整个图像着色，因为它会导致狗的背景也被着色，看起来很难看。

是否可以使用 CSS 为任意形状的图像着色？

（我假设你明白我的意思，没有必要无用的代码）

谢谢！

【问题讨论】：

给图片提供相对位置，并在里面添加一个绝对位置的div
您需要制作一个与狗的轮廓相同大小的 png 并将其覆盖。
@Morpheus，但这有什么帮助呢？如果位置是 100px x 100px，并且图像是狗的形状，而图像的其余部分是透明的，那么它如何添加一个大小为 100px x 100px 的 div 会有所帮助。也许我想念你的理解。我承认我不经常使用基于网络的语言。
@gaynorvader，是的，我可以这样做，但如果可能的话，我真的不希望这样做。如果有必要，我会的。
如果你添加.overlay{background: black; opacity: 0.2}

标签： css png tint

【解决方案1】：

如果您只希望background-image 受到影响，您可以使用线性渐变来做到这一点，就像这样：

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

如果你想让它更暗，让 alpha 值更高，否则你想让它更亮，让 alpha 更低

【讨论】：

谢谢，因为这让我可以在不使页面内容变暗的情况下使
元素的图像变暗。最佳答案！
很高兴你喜欢。总是很高兴有用！

【解决方案2】：

简单

img {
  filter: brightness(50%);
}

【讨论】：

当然这应该是公认的答案。这是适用于所有背景的最简单的方法。
这是要走的路，如果不是太担心旧的 IE
注意：如果这使您的图像看起来太暗淡，您可能需要同时增加饱和度，例如filter: brightness(75%) saturate(140%);
谢谢！这太棒了！
遗憾的是，当图像在透明/白色背景上为 png 时效果不佳

【解决方案3】：

您可以随时更改图像的不透明度，考虑到任何替代方案的难度，这可能是最好的方法。

CSS：

.tinted { opacity: 0.8; }

如果您对更好的浏览器兼容性感兴趣，我建议您阅读以下内容：

http://css-tricks.com/css-transparency-settings-for-all-broswers/

如果您有足够的决心，您可以早在 IE7 中就可以使用它（谁知道呢！）

注意：正如 JGonzalezD 在下面指出的那样，如果背景颜色通常比图像本身更暗，这实际上只会使图像变暗。尽管如果您不是特别想使图像变暗，而是出于任何原因想要在悬停/聚焦/其他状态下突出显示图像，这种技术可能仍然有用。

【讨论】：

也用background: black;的div包裹图片
这不会使图像比它更暗（不透明度：1;）它实际上是变亮。
如果图像显示在深色背景上，它似乎具有使图像变暗的效果（因为更多的深色背景会显示出来）。您可以在此处查看示例：jsfiddle.net/mvhfxrm1 顶部图像的颜色为#CCCCCC，而底部图像的颜色为#676767
@SeanDunwoody 对，不幸的是，对于形状不同于正方形的图像，它不起作用（带有透明胶片的图像），因为黑暗的背景将一直可见。但它适用于平方图像。
这取决于形状的复杂性，如果它只是圆角，那么您可以将它们作为样式应用到背景容器（使用边框半径）。虽然如果你有一张像透明背景上的人这样的复杂图片，那么我真的想不出办法。解决这个问题的最佳方法可能是使用精灵或其他东西来交换图像以创建这种效果，但可能有更好的方法来做到这一点，不幸的是，我不像以前那样了解 CSS 的最新情况。

【解决方案4】：

我会制作狗的轮廓（黑色）的新图像，其余部分与原始图像相同。在 html 中，添加一个以这个剪影为背景的包装 div。现在，使原始图像半透明。狗会变暗，狗的背景会保持不变。您可以通过在悬停时将原始图像的不透明度设置为 100% 来实现 :hover 技巧。然后，当您将鼠标悬停在他身上时，狗就会弹出！

风格

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>

【讨论】：

第二行应该是.original{opacity:0.7;}

【解决方案5】：

Webkit only solution

快速解决方案，依赖于-webkit-mask-image 属性。 -webkit-mask-image 为元素设置掩码图像。

这种方法有一些陷阱：

显然，仅适用于 Webkit 浏览器
需要额外的包装器来应用:after 伪元素（IMG 标签不能有:before/:after 伪元素，grr）
因为有一个额外的包装器，我不知道如何使用attr(…) CSS 函数来获取IMG 标记URL，所以它被单独硬编码到CSS 中。

如果您可以忽略这些问题，这可能是一个可能的解决方案。 SVG 过滤器将更加灵活，Canvas 解决方案将更加灵活，支持范围更广（SVG 不支持 Android 2.x）。

【讨论】：