如何在不影响背景颜色的情况下更改背景图像的不透明度？

Question

I've got a div with a background color and a transparent background image.

HTML

<div class="watermark">
    <div class="col-md-12">Something else</div>
    <div class="col-md-12">Something more..</div>
    <div class="col-md-12">Something at the end</div>
</div>

CSS

body{
  background-color:white;
}

.watermark {
  display: block;
  position: relative;
}

.watermark::after {
  content: "";
 background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

jsfiddle

I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.

Is there a way to do this?

Answer 1

Use an rgba color value and remove the opacity . For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.

You can check this fiddle .

Answer 2

You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.

 .watermark { width: 300px; height: 100px; display: block; position: relative; } .watermark::before, .watermark::after { content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .watermark::before { background:#C52F11; } .watermark::after { background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat; opacity: 0.2; } 

 <div class="watermark"> <div class="col-md-12">Something else</div> <div class="col-md-12">Something more..</div> <div class="col-md-12">Something at the end</div> </div> 

Updated fiddle

Answer 3

CSS for body , whatever you want

body{
    background-color:white;
}

main div(.watermark) with background color, width and height of your choice

.watermark {
    width: 538px;
    height: 190px;
    display: block;
    position: relative;
    background: #C52F11;
}

watermark after CSS , image with opacity

.watermark::after {
    content: "";
    background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
    opacity: 0.4;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    width: 538px;
    height: 190px;
}

I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.

Answer 4

It's a trick:

1. Insert the image into the webpage anywhere(regardless of the size).

2. Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).

3. Take a snapshot of that image.

4. Remove that image and insert the snapped image where ever you want.