使用 CSS/Javascript 使背景图像变暗并具有部分透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15400402/
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
Darken background images with partial transparency using CSS/Javascript
提问by Leo Jiang
I'm using partially transparent CSS sprites (i.e. the object in the image is opaque, the background is transparent). I want to darken the image using CSS or Javascript. I need to make the images change levels of darkness and it's impractical to make a separate image for each level of darkness.
我正在使用部分透明的 CSS 精灵（即图像中的对象是不透明的，背景是透明的）。我想使用 CSS 或 Javascript 使图像变暗。我需要让图像改变黑暗程度，为每个黑暗程度制作单独的图像是不切实际的。
If it wasn't for the transparent background, I could've added a black layer on top of the image and change the opacity of that layer.
如果不是透明背景，我可以在图像顶部添加一个黑色图层并更改该图层的不透明度。
Here's basically what I have: http://jsfiddle.net/PXU6j/2/
这基本上是我所拥有的：http: //jsfiddle.net/PXU6j/2/
<!-- SO is forcing me to add code -->
<div class=logo>How do I make this darker?</div>
采纳答案by Leo Jiang
What about this:
那这个呢：
For each sprite, have only oneother image that is completely black, but in the same shape as the original. A silhouette, if you will. Then, make a container div, like so:
对于每个精灵，只有一个完全黑色的其他图像，但形状与原始图像相同。一个剪影，如果你愿意的话。然后，创建一个容器 div，如下所示：
<div class="silhouette">
<div class="sprite"></div>
</div>
Then, you can alter the opacity of the div.spriteelement and achieve the effect you want. I understand this doesn't truly solve the problem, but I don't know of another way short of using PHP, which doesn't even solve the problem in full either.
然后，您可以更改div.sprite元素的不透明度并达到您想要的效果。我知道这并不能真正解决问题，但我不知道使用 PHP 的另一种方法，它甚至不能完全解决问题。
回答by Andrew Mao
Throw a div over it that's black-colored with an alpha channel:
在它上面扔一个带有 alpha 通道的黑色 div：
Note that I used
请注意，我使用
background-color: #000000;
opacity: 0.7;
but you could also use
但你也可以使用
background-color: rgba(0, 0, 0, 0.7);
Vary opacity and you'll get different shades of dark.
改变不透明度，你会得到不同深浅的暗度。
回答by Edgar Allan Pwn
There is no cross-browser compatible solution.
没有跨浏览器兼容的解决方案。
You can either use canvas manipulation with something like Camanjsor Pixastic, or you can use css3 filters. Neither of these methods work for non-html5-compatible browsers.
你可以使用像Camanjs或Pixastic这样的画布操作，或者你可以使用css3 过滤器。这些方法都不适用于非 html5 兼容的浏览器。
回答by Try this
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="/assets/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
#testarea1, #testarea2 {
position:absolute;
background-color: #666;
width: 200px;
height: 200px;
}
#testarea2 {
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#testarea1").mouseover(function(){
$("#testarea2").css("background-color","yellow");
$("#testarea1").fadeOut(500);
$("#testarea2").fadeIn(1500);
});
$("#testarea2").mouseout(function(){
$("#testarea1").css("background-color","#666");
$("#testarea2").fadeOut(500);
$("#testarea1").fadeIn(1500);
});
});
</script>
<p>Hover to see effect</p>
<div id="testarea1">displayarea1</div>
<div id="testarea2">displayarea2</div>
</body>
</html>
