我有一个带有文本块的div元素和一个父div,我在其中设置了一个背景图像 . 现在我想减少背景图像的不透明度 . 请建议我如何做到这一点 .
提前致谢 .
EDIT:
我希望通过编辑html内容来改变我的博客文章对blogger.com的看法 . html代码如下所示:
<div>
//my blog post
</div>
我尝试用div元素包围上面的整个代码,并分别设置每个div的不透明度,如下所示:
<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
//my blog post
</div>
</div>
但它没有用 .
7 回答
没有什么叫做背景不透明 . 不透明度应用于元素,其内容及其所有子元素 . 并且只能通过覆盖子元素中的不透明度来改变这种行为 .
儿童与父母的不透明度是一个长期存在的问题,最常见的解决方法是使用
rgba(r,g,b,alpha)
背景颜色 . 但在这种情况下,由于它是背景图像,该解决方案将无法工作 . 一种解决方案是将图像生成为具有图像本身中所需不透明度的PNG . 另一个解决方案是将孩子分开并使其绝对定位 .您无法直接在背景图像上使用透明度,但您可以通过以下方式实现此效果:
http://jsfiddle.net/m4TgL/
HTML:
CSS:
如今,只需使用CSS属性"background-blend-mode"即可 .
它会将背景颜色(白色,0.6不透明度)混合到背景图像中 . 了解更多here (W3S) .
您可以创建几个div并执行此操作:
我做了那几次......简单但有效......
响应之前的注释,如果CSS位于php页面而不是css样式表中,则可以在“容器”示例中按变量更改背景 .
我做的是:
CSS:
你可以通过简单的代码来做到这一点: