使用 CSS 使图像变暗（任何形状）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15765550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Darkening an image with CSS (In any shape)
提问by Josiah
So I have seen quite a few ways to darken images with CSS, including ones with rounded corners, but my problem is different.
所以我看到了很多用 CSS 使图像变暗的方法，包括圆角的方法，但我的问题是不同的。
Let's say I have an .png image that looks like a little dog (just go with it, I don't have any good examples), when I place it on my page, I give it dimensions of 100 x 100.
假设我有一个 .png 图像，看起来像一只小狗（随它去吧，我没有任何好的例子），当我把它放在我的页面上时，我给它的尺寸为 100 x 100。
But I can't just overlay something on it, or tint the entire image, as it will cause the background of the dog to be tinted as well, which looks ugly.
但是我不能只是在上面覆盖一些东西，或者给整个图像着色，因为它会导致狗的背景也被着色，看起来很难看。
Is it possible to tint an image of arbitrary shape with CSS?
是否可以使用 CSS 为任意形状的图像着色？
(I'm assuming you understand my point, and useless code is not necessary)
（我假设您理解我的观点，并且不需要无用的代码）
Thanks!
谢谢！
采纳答案by Sean
You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.
考虑到任何替代方案的难度，您始终可以更改图像的不透明度，这可能是最好的方法。
CSS:
CSS：
.tinted { opacity: 0.8; }
If you're interested in better browser compatability, I suggest reading this:
如果您对更好的浏览器兼容性感兴趣，我建议您阅读以下内容：
http://css-tricks.com/css-transparency-settings-for-all-broswers/
http://css-tricks.com/css-transparency-settings-for-all-broswers/
If you're determined enough you can get this working as far back as IE7 (who knew!)
如果你有足够的决心，你可以在 IE7 中使用它（谁知道！）
Note:As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.
注意：正如 JGonzalezD 在下面指出的那样，如果背景颜色通常比图像本身更暗，这只会使图像变暗。尽管如果您不想特别想使图像变暗，而是出于任何原因想在悬停/聚焦/其他状态下突出显示它，这种技术可能仍然有用。
回答by The Whiz of Oz
Easy as
简单如
img {
filter: brightness(50%);
}
回答by Arthur Serafim
if you want only the background-imageto be affected, you can use a linear gradient to do that, just like this:
如果你只想background-image影响 ，你可以使用线性渐变来做到这一点，就像这样：
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);
If you want it darker, make the alpha value higher, else you want it lighter, make alpha lower
如果你想让它更暗，把 alpha 值调高，否则你想让它更亮，把 alpha 调低
回答by JSSR
I would make a new image of the dog's silhouette (black) and the rest the same as the original image. In the html, add a wrapper div with this silhouette as as background. Now, make the original image semi-transparent. The dog will become darker and the background of the dog will stay the same. You can do :hover tricks by setting the opacity of the original image to 100% on hover. Then the dog pops out when you mouse over him!
我会制作狗的轮廓（黑色）的新图像，其余与原始图像相同。在 html 中，添加一个以此轮廓作为背景的包装 div。现在，使原始图像半透明。狗会变暗，狗的背景会保持不变。您可以通过在悬停时将原始图像的不透明度设置为 100% 来执行 :hover 技巧。然后当您将鼠标悬停在他身上时，狗就会弹出！
style
风格
.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>
回答by thirdender
Quick solution, relies on the -webkit-mask-imageproperty. -webkit-mask-imagesets a mask image for an element.
快速解决方案，依赖于-webkit-mask-image属性。-webkit-mask-image为元素设置遮罩图像。
There are a few gotchas with this method:
这种方法有一些问题：
- Obviously, only works in Webkit browsers
- Requires an additional wrapper to apply the
:afterpsuedo-element (IMGtags can't have:before/:afterpseudo elements, grr) - Because there's an additional wrapper, I'm not sure how to use the
attr(…)CSS function to get theIMGtag URL, so it's hard-coded into the CSS separately.
- 显然，仅适用于 Webkit 浏览器
- 需要一个额外的包装器来应用
:after伪元素（IMG标签不能有:before/:after伪元素，gr） - 因为有一个额外的包装器，我不确定如何使用
attr(…)CSS 函数来获取IMG标签 URL，所以它单独硬编码到 CSS 中。
If you can look past those issues, this might be a possible solution. SVG filters will be even more flexible, and Canvas solutions will be even more flexible and have a wider range of support (SVG doesn't have Android 2.x support).
如果您可以忽略这些问题，这可能是一个可能的解决方案。SVG 过滤器将更加灵活，Canvas 解决方案将更加灵活并拥有更广泛的支持（SVG 没有 Android 2.x 支持）。
