用css更改背景图像的不透明度

Question

I want to change header's background image opacity with css. Could you help me please.

 .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

An alternative would be that you convert this background image file to the .PNG format and make the original image 0.2 opacity using a photo editing program but if you insist on using CSS, you can use the method below:

Since CSS does not directly support background image opacity, you can try using a pseudo-class to overlay another on your header and set opacity on it. Something along the lines of this should help:

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

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

CSS code

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

}

Hope it will help you.

Answer 3

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

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

See the link here

Answer 4

You can change the opacity in programs like Photoshop or GIMP.

Or you can do that with opacity in css. But you probably don't want that since you will have some content in your .intro which will then also be affected by it.

So I suggest following solution

.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/

Basically you add :after element that will be a background image , you position it absolute ( your .intro will need to be position:relative; ) and then you set the z-index and opacity .