更改背景图像不透明度 [英] Change background image opacity

问题描述

我有一个带有文本块的div元素和一个父div，我在其中设置了一个背景图像。现在我想减少背景图片的不透明度。请提示我该怎么做。

预先感谢。

我希望通过编辑html内容来改变我的博客帖子查看blogger.com的方式。该HTML代码如下所示：

 < div> 
 //我的博客文章
< / div> 
  

我尝试用div元素包围上面的整个代码，并分别设置每个div的不透明度，如下所示：

 < div style =background-image：url（image.jpg）; opacity：0.5;> ; 
< div style =opacity：1;> 
 //我的博客文章
< / div> 
< / div> 
  

但它不起作用。

解决方案

没有什么叫背景不透明。不透明度应用于元素，其内容及其所有子元素。而且这种行为不能仅仅通过重写子元素中的不透明度来改变。

子对父亲的不透明性一直是一个长期存在的问题，最常见的修复方法是使用 rgba（r，g，b，alpha）背景颜色。但在这种情况下，由于它是一个背景图像，该解决方案将无法工作。一种解决方案是将图像生成为具有图像本身所需的不透明度的PNG。另一个解决方案是将孩子的div拿出来，并使其绝对定位。

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.

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:

<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 style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
 //my blog post
</div>
</div>

But it is not working.

解决方案

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.

这篇关于更改背景图像不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！