更改背景图片透明度

Question

我有一个包含文本块和父级div的div元素，我在其中设置了背景图片。现在我想降低背景图片的透明度。怎么做呢？

编辑：

我想通过编辑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>

但是它没有起作用。

- Victor Mukherjee

---

使用 opacity:0.5//或其他值 - Arpit Srivastava

你在测试哪个浏览器？ - bhatanant2

你正在测试哪个浏览器？可能是https://dev59.com/93RB5IYBdhLWcg3wZWbi的重复问题。 - Arpit Srivastava

你在双引号内使用了双引号，请尝试使用样式="background-image:url('image.jpg');opacity:0.5;"。 - ayunami2000

设置不透明度后可能会出现问题。这就发生在我身上：设置背景图像的不透明度而不影响子元素。 - undefined

Answer 1

现在，使用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）与背景图像混合。在此处了解更多(W3S)。

- Carlos2W

---

很棒的答案！解决方案更加简洁，但不幸的是在IE上无法工作。 - tsvikas

@tsvikas：IE 上什么都不好用。说实话，在编写网页时，除非涉及数据保护，否则我已经放弃考虑 IE 了。 :-P - progyammer

@progyammer，市场份额只有8％，再提供支持确实不值得。我认为微软曾经试图通过专有版本来垄断浏览器市场，但他们失败了。（谢天谢地。）我们将看到Edge是否能真正挤掉Chrome的位置。 - BobRodes

@BobRodes 如果我的客户能够理解这个就太棒了。 - Diederik

哇 - 我使用 background-blend-mode: darken; 与 background-color: rgba(0,0,0,0.6)，正好是我需要的...我不知道我怎么错过了这个 CSS 属性...但这就是我要找的！ - WEBjuju

Answer 2

你无法直接在背景图像上使用透明度，但你可以通过以下方式实现这种效果：

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

- Alexey Ivanov

---

我很喜欢 - 谢谢。唯一的问题是，我认为你不能通过编程方式更改背景图像 - 你必须将其硬编码到CSS文件中... - Spock

你需要在 CSS 文件中硬编码它，或者可以将其作为内联样式添加... style="background-image: url('image.jpg')" - Ankur

有没有办法调整这个以实现视差滚动效果？ - GrowLoad

Answer 3

试试这样做：

.bg_rgba {
  background-image: url(https://picsum.photos/200);
  background-color: rgba(255, 255, 255, 0.486);
  background-blend-mode: overlay;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class="bg_rgba"></div>

这在我的情况下起作用了。 您可以根据需要减少或增加背景颜色的透明度值。

- Shreyas Shrawage

Answer 4

没有所谓的背景不透明度。透明度应用于元素及其内容和所有子元素。而且这种行为不能仅通过覆盖子元素中的透明度来改变。

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

- techfoobar

---

2021年更新：似乎现在支持使用rgba()设置background。请参考@Nur Nas或@Shreyas Shrawage的答案。 - OXiGEN

Answer 5

你也可以简单地使用这个：

.bg_rgba {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://picsum.photos/200');
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class='bg_rgba'></div>

你可以根据自己的喜好调整颜色的透明度。

- Nur Nas

Answer 6

你可以创建多个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>

我做过几次这样的事情......简单而有效......

- deki.bg

Answer 7

回应早期的评论，如果 CSS 在您的 PHP 页面中而不是在样式表中，您可以通过变量在“容器”示例中更改背景。

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

- basd

Answer 8

我所做的是：

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

- Anthony Wittenborn

Answer 9

你可以通过简单的代码来实现：

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

- Ahmad Balavipour