Html 更改背景图像不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12605908/
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
Change background image opacity
提问by Victor Mukherjee
I have a div element with text blocks and a parent div in which I have set a background image. Now I want to reduce the opacity of the background image. Please suggest how I can do that.
我有一个带有文本块的 div 元素和一个在其中设置了背景图像的父 div。现在我想降低背景图像的不透明度。请建议我如何做到这一点。
Thanks in advance.
提前致谢。
EDIT:
编辑：
I am looking to change the way my blog post looks at blogger.com by editing the html content. The html code looks as follows:
我希望通过编辑 html 内容来改变我的博客文章对 blogger.com 的看法。html 代码如下所示：
<div>
//my blog post
</div>
I tried to surround the whole code above with a div element and set opacity of each div separately as below:
我试图用一个 div 元素包围上面的整个代码，并分别设置每个 div 的不透明度，如下所示：
<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
//my blog post
</div>
</div>
But it is not working.
但它不起作用。
采纳答案by techfoobar
There is nothing called background opacity. Opacity is applied to the element, its contents and all its child elements. And this behavior cannot be changed just by overriding the opacity in child elements.
没有什么叫做背景不透明度。不透明度应用于元素、其内容及其所有子元素。并且这种行为不能仅仅通过覆盖子元素中的不透明度来改变。
Child vs parent opacity has been a long standing issue and the most common fix for it is using rgba(r,g,b,alpha)background colors. But in this case, since it is a background-image, that solution won't work. One solution would be to generate the image as a PNG with the required opacity in the image itself. Another solution would be to take the child div out and make it absolutely positioned.
子级与父级不透明度一直是一个长期存在的问题，最常见的解决方法是使用rgba(r,g,b,alpha)背景颜色。但在这种情况下，由于它是背景图像，该解决方案将不起作用。一种解决方案是将图像生成为具有图像本身所需不透明度的 PNG。另一种解决方案是将子 div 取出并使其绝对定位。
回答by Carlos2W
Nowadays, it is possible to do it simply with CSS property "background-blend-mode".
如今，可以简单地使用 CSS 属性"background-blend-mode"来做到这一点。
<div id="content">Only one div needed</div>
div#content {
background-image: url(my_image.png);
background-color: rgba(255,255,255,0.6);
background-blend-mode: lighten;
/* You may add things like width, height, background-size... */
}
It will blend the background-color (which is white, 0.6 opacity) into the background image. Learn more here (W3S).
回答by Alexey Ivanov
You can't use transparency on background-images directly, but you can achieve this effect with something like this:
您不能直接在背景图像上使用透明度，但您可以通过以下方式实现此效果：
HTML:
HTML：
<div class="container">
<div class="content">//my blog post</div>
</div>?
CSS:
CSS：
.container { position: relative; }
.container:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('image.jpg');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}?
回答by deki.bg
You can create several divs and do that:
您可以创建多个 div 并执行以下操作：
<div style="width:100px; height:100px;">
<div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div>
<div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div>
</div>
I did that couple times... Simple, yet effective...
我做了几次......简单，但有效......
回答by basd
Responding to an earlier comment, you can change the background by variable in the "container" example if the CSS is in your php page and not in the css style sheet.
响应较早的评论，如果 CSS 在您的 php 页面中而不是在 css 样式表中，您可以在“容器”示例中通过变量更改背景。
$bgimage = '[some image url];
background-image: url('<?php echo $bgimage; ?>');
回答by Anthony Wittenborn
What I did is:
我所做的是：
<div id="bg-image"></div>
<div class="container">
<h1>Hello World!</h1>
</div>
CSS:
CSS：
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
#bg-image {
height: 100%;
width: 100%;
position: absolute;
background-image: url(images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
}
回答by Ahmad Balavipour
and you can do that by simple code:
你可以通过简单的代码做到这一点：
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
