更改背景图像的不透明度

我有一个带有文本块的div元素和一个父div，我在其中设置了背景图像。现在我想减少背景图片的不透明度。请建议我如何做到这一点。更改背景图像的不透明度

在此先感谢。

编辑：

我期待通过编辑HTML内容改变在blogger.com我的博客文章的样子。 HTML代码如下所示：

<div> 
//my blog post 
</div>

我试图围绕上述与div元素整个代码，并设置不透明度每个格设置如下分别：

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

但它无法正常工作。

来源

2012-09-26 Victor Mukherjee

使用'不透明度：0.5 //或something' –

哪个浏览器中测试你这吗？ – bhatanant2

您正在测试哪个浏览器？和可能重复的http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text –

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

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

来源

2012-09-26 16:19:20 techfoobar

不能直接使用的背景图像的透明度，但你可以实现像这样的东西这样的效果：

http://jsfiddle.net/m4TgL/

HTML：

<div class="container"> 
    <div class="content">//my blog post</div> 
</div>

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; 
}

来源

2012-09-26 16:35:58

这真了不起。谢谢！ – veeTrain

应该接受答案！ – Carlos2W

我喜欢它 - 谢谢。唯一的是，我不认为你可以通过编程来改变背景图像 - 你必须将其硬编码到css文件中... – Spock

-3

你可以用简单的代码来做到这一点：

filter:alpha(opacity=30); 
-moz-opacity:0.3; 
-khtml-opacity: 0.3; 
opacity: 0.3;

来源

2013-04-27 05:28:26

您可以创建几个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>

我做了几次......简单而有效的...

来源

2015-03-18 20:29:22

如今，它可以做到这一点只需使用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... */ 
}

它将背景颜色（这是白色，0.6不透明度）混合到背景图像。了解更多信息here (W3S)。

来源

2016-11-01 19:09:37 Carlos2W

很好的回答！更清洁的解决方案，但不幸的是不能在IE上运行。 – tsvikas

@tsvikas在IE上无效。老实说，除非是保护数据，否则在编写网页时我已经不再考虑IE了。 :-P – progyammer

最干净的解决方案imho –

响应之前的评论，如果CSS是在你的php页面而不是在CSS样式表中，你可以通过“容器”例子中的变量来改变背景。

$bgimage = '[some image url]; 
background-image: url('<?php echo $bgimage; ?>');

来源

2017-04-27 20:03:18 basd

我所做的是：

<div id="bg-image"></div> 
<div class="container"> 
    <h1>Hello World!</h1> 
</div>

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; 
}

来源

2017-07-07 01:47:02

更改背景图像的不透明度

回答

相关问题