56

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

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

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

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

（我假设您理解我的观点，不需要无用的代码）

谢谢！

4

5 回答 5

184

简单如

img {
  filter: brightness(50%);
}
于 2016-12-10T14:55:34.067 回答
28

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

CSS：

.tinted { opacity: 0.8; }

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

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

如果你有足够的决心，你可以让这个工作早在 IE7 （谁知道！）

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

于 2013-04-02T13:54:04.680 回答
15

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

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

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

于 2019-07-30T13:18:24.683 回答
2

我会制作狗的轮廓（黑色）的新图像，其余部分与原始图像相同。在 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>
于 2014-05-09T15:30:59.330 回答
0

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）。

于 2013-04-02T14:02:36.273 回答