CSS: Semi-transparent background and an image

问题

body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

I tried using the above to produce a semi-transparent white background above a background-image. It doesn't work, only the background image is shown and the background-color appears to be ignored. How can I adjust the opacity of a body background image?

回答1:

background-color is placed underneath background-image, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with background-color.

回答2:

You can use the css "before" pseudo class to create the white overlay and place before all the content in your DOM. Add z-index:-1 to ensure it doesn't sit on top of other elements:

body {
    background: url("image.jpg");
}
body:before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.6);
}

jsfiddle

回答3:

I've done this using two separate images when announcing a special sale. One is the permanent image in the background and the other is a temporary sale image with semi-transparent background floated over the other image, that can be easily removed after the sale is over. The main div holding the background image needs to be Position:relative so you can position the semi-transparent image with position:absolute over the other image.

Here is the HTML:

<div class="tempsale" >
    <img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
    <div class="tempsaletext">
        <img src="images/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale">
    </div>
</div>

Here is the CSS:

.tempsale {
    text-align:center; 
    position:relative;
}
.tempsaletext {
    positon:absolute; 
    top:10px; 
    left:20%; 
}

For more info, see full instructions here.

来源：https://stackoverflow.com/questions/19779021/css-semi-transparent-background-and-an-image

标签

css

background

opacity