Question

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

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

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

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

（我假设你理解我的观点，没有必要使用无用的代码）

谢谢！

Answer 1

轻松

img {
  filter: brightness(50%);
}

Answer 2

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

CSS：

.tinted { opacity: 0.8; }

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

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

如果你足够坚定，你可以让它早在IE7上工作（谁知道！）

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

Answer 3

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

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

如果您想将其设置为更暗，请将Alpha值设置为较高，否则将其设置为较亮，将Alpha值设置为较小

Answer 4

我会拍出狗的轮廓（黑色）的新图像，其余部分与原始图像相同。在html中，添加一个包装div作为背景。现在，使原始图像半透明。狗会变得更黑，狗的背景会保持不变。你可以这样做：通过在悬停时将原始图像的不透明度设置为100％来悬停技巧。当你把鼠标放在他身上时，狗会弹出来！

式

.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>

Answer 5

的 Webkit only solution

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

这种方法有一些问题：

显然，只适用于Webkit浏览器

需要额外的包装才能应用:after伪元素（IMG标记不能有:before / :after伪元素，grr）

因为还有一个额外的包装器，我不确定如何使用attr(…) CSS函数来获取IMG标记网址，因此它会单独硬编码到CSS中。

如果您可以查看这些问题，这可能是一种可能的解决方案。 SVG过滤器将更加灵活，Canvas解决方案将更加灵活，并且具有更广泛的支持（SVG没有Android 2.x支持）。

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

5 个答案: