使用CSS更改背景图片的不透明度

Question

我想用css来改变标题的背景图片的透明度。能请你帮忙吗？

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

<header class="intro">
  ...
</header>

- EducateYourself

---

仅仅因为一些你可以在一分钟内通过谷歌得到答案的内容而获得四个赞？这并不符合OP用户名的含义。 - Shikkediel

在现代浏览器中，您还可以利用CSS3的filter：https://developer.mozilla.org/en-US/docs/Web/CSS/filter - connexo

Answer 1

另一种选择是将此背景图像文件转换为.PNG格式，并使用照片编辑程序使原始图像透明度为0.2，但如果您坚持使用CSS，可以使用以下方法：由于CSS不直接支持背景图像透明度，因此您可以尝试使用伪类在标题上覆盖另一个元素并设置其透明度。以下代码应该有所帮助：

<header class="intro">
...
</header>

.intro {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

- salmanxk

Answer 2

HTML代码

<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>

CSS 代码

.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...

}

希望这能帮到您。

- Zain Farooq

Answer 3

虽然没有CSS属性background-opacity，但您可以通过在元素后面插入一个伪元素，使其具有与元素相同大小的常规不透明度来模拟它。

.intro {
 position: relative;
 z-index: 0;
 display: table;
 width: 100%;
 height: auto;
 padding: 100px 0;
 text-align: center;
 color: #fff;
 background-color: #000;
}

.intro:after {
 content : "";
 width: 100%;
 height: 100%;
 display: inline-block;
 position: absolute;
 top: 0;
 left: 0;
 opacity : 0.2;
 z-index: -1;
 background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll;
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
}

<header class="intro">
  ...
</header>

请查看链接 此处，相关内容与IT技术有关。

- om_jaipur

---

虽然这理论上可以回答问题，但最好在此处包括答案的主要部分，并提供链接以供参考。如果链接页面更改，则仅提供链接的答案可能无效。 - Paulie_D

Answer 4

您可以在像Photoshop或GIMP这样的程序中更改不透明度。

或者您可以在CSS中使用opacity来实现。但是，您可能不希望这样做，因为您可能会有一些内容在您的.intro中，这也会受到影响。

因此，我建议采用以下解决方案。

.intro {
    position: relative;
    z-index: 0;
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: black;
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.intro:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

基本上，您需要添加一个“:after”元素作为背景图像，将其定位为“absolute”（您的“.intro”将需要设置为“position:relative;”），然后设置“z-index”和“opacity”。

https://jsfiddle.net/q63nf0La/

- Paran0a

---

非常感谢您的帮助！现在我想对另一个div做同样的事情，但似乎我做错了什么。您能帮我吗？.download-section { 宽度：100％; 填充：50px 0; 颜色：#fff; 背景：url（../img/bg.jpg）不重复中心中心滚动; 背景颜色：#000; -webkit-background-size：cover; -moz-background-size：cover; 背景大小：覆盖; -o-background-size：cover; } - EducateYourself

你能否发布一个 jsfiddle，展示一下你目前的代码？对于其他元素，应该是相同的过程。但如果你提供完整的例子，我会进一步研究它。 - Paran0a

对不起，你有看我做了什么吗？我只是重复了我的步骤，它可以正常工作。你在逗我吗？ - Paran0a

非常感谢您的帮助！我的代码有些问题。 - EducateYourself