用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>

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

Answer 2

HTML代码

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

CSS代码

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

}

希望它会对你有所帮助.

Answer 3

您可以在 Photoshop 或 GIMP 等程序中更改不透明度。

或者你可以用opacitycss 来做到这一点。但您可能不希望这样，因为您的内容中会有一些内容.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;
}

https://jsfiddle.net/q63nf0La/

基本上，您添加:after将成为背景图像的元素，放置它absolute（您.intro需要position:relative;），然后设置z-index和opacity。