javascript HTML/CSS/jQuery：背景图像不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4512056/
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
HTML/CSS/jQuery: background-image opacity
提问by AgileMeansDoAsLittleAsPossible
Let's say I have a div, and that div should have a background-image:url(foobar.png). Also, however, foobar.png's opacity should be set to 40% so that the background image is translucent. How can I do this?
假设我有一个 div，该 div 应该有一个 background-image:url(foobar.png)。然而，foobar.png 的不透明度应该设置为 40%，以便背景图像是半透明的。我怎样才能做到这一点？
If this is not possible without JavaScript, is there an example script I can refer to? Something like this?
如果没有 JavaScript 就无法做到这一点，是否有我可以参考的示例脚本？像这样的东西？
jQuery.fn.fadedBgImg = function(url, opacity) {
// Create block element that fills `this` element
// Set z-index of said element to lowest
// Set opacity of said element to 40%
// Insert said element into parent
}
回答by Jacob
Use CSS to set the opacity:
使用 CSS 设置不透明度：
.translucent {
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
Edit:
编辑：
Yes, opacitysets the opacity for the entire element, not just the content. To work around this, you can have the content overlay the background and wrap them both in a common parent:
是的，opacity设置整个元素的不透明度，而不仅仅是内容。要解决此问题，您可以让内容覆盖背景并将它们都包装在一个共同的父级中：
<div id="container">
<div id="background" class="translucent"></div>
<div id="content"></div>
</div>
And use CSS like this:
并像这样使用 CSS：
#container {
position: relative;
width: 200px;
height: 200px;
}
#background, #content {
position: absolute;
top: 0;
left: 0;
}
回答by Steve Adams
I find this is the easiest method: In your graphics editor, set the transparency on foobar.png to 60% and save it as a 24 bit png file. If you need to serve this document to IE6 and don't want to use a png fix, this isn't a solution.
我发现这是最简单的方法：在您的图形编辑器中，将 foobar.png 上的透明度设置为 60% 并将其保存为 24 位 png 文件。如果您需要将此文档提供给 IE6 并且不想使用 png 修复，这不是解决方案。
Otherwise, opacity in web browsers is such an annoying thing to deal with in terms of cross-browser support, and dealing with child elements becoming transparent is a typical issue as I recall.
否则，就跨浏览器支持而言，Web 浏览器中的不透明性是一件令人讨厌的事情，我记得，处理子元素变得透明是一个典型的问题。
Unfortunately I don't have any scripts that solve this handy.
不幸的是，我没有任何脚本可以方便地解决这个问题。
edit: I see you edited, and I can tell you're not as unaware of what you're doing as I originally expected. Don't be offended if my advice seems a little elementary, haha.
编辑：我看到您进行了编辑，我可以告诉您，您并没有像我最初预期的那样不了解自己在做什么。如果我的建议看起来有点初级，请不要生气，哈哈。
回答by Prakash Rao
Try this .. Little changes in the HTML structure .. and instead of using background image use normal image and set it backwards with low opacity.
试试这个.. HTML 结构的小变化.. 而不是使用背景图像使用普通图像并将其设置为低不透明度向后。
.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}<div class="my_div">
<div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
<div class="front_text">
<h2>Testing Title</h2>
<p>Lorem Ipsum content testing.
This is Prakash Rao </p>
</div>
</div>回答by XMen
Try changing opacity with css:
尝试使用 css 更改不透明度：
opacity:0.4
回答by WBT
While there's no direct support for setting background-image opacity, you can specify multiple background-image values, which are rendered with the first one closest to the viewer.
虽然不直接支持设置 background-image 不透明度，但您可以指定多个 background-image 值，这些值与最接近查看者的第一个一起呈现。
Thus, if you are for some strange reason unable to simply edit the opacity of the image in an image editor and serve up the modified image, you could try something like:
因此，如果您出于某种奇怪的原因无法在图像编辑器中简单地编辑图像的不透明度并提供修改后的图像，您可以尝试以下操作：
semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";
This example assumes you're generally rendering over a white page background; you may wish to change the color of the semitransparent image if you're trying to simulate semitransparency with some other color partially bleeding "through."
此示例假设您通常在白色页面背景上进行渲染；如果您尝试使用一些其他颜色部分“穿透”来模拟半透明，您可能希望更改半透明图像的颜色。
回答by yogesh chatrola
In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.
img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier
img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
