CSS背景渐变，图像

Question

I have a problem with background:

1. I have 3 child elements.
2. Each of them got background-image by #nth_image ID.
3. Also they got background gradient by .background-gradient class.
4. All png images got alpha channel

---

The problem is that background-image overwrite background gradient.

• As result I want png image on front and gradient on background

 .background_gradient { background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%); } #first_image { background: url(images/img01.png); } #second_image { background: url(images/img02.png); } #third_image { background: url(images/img03.png); } 

 <div class="parent"> <div id="first_iamge" class="background_gradient"></div> <div id="second_image" class="background_gradient"></div> <div id="third_image" class="background_gradient"></div> </div> 

Answer 1

Both the gradient and image background utilize the same image property of the background. Its as if you are writing it like this:

.class {
  background-image: url('/path/to/image.png');
  background-image: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}

so basically you are overwriting the image part of the background with the gradient or vice versa depending on which rule takes precedence over the other.

My suggestion would be to style your markup differently. Have a div inside of the div with the background you want.

<div class="background-gradient">
  <div id="first-background"></div>
</div>

Answer 2

If you want to mix 2 types of background on a single element, my suggestion is to use css pseudo element. You could use the before pseudo element having the same size as your element for your gradient part.

You could have something like this:

.background_gradient {
  position: relative;
}    
.background_gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
  background: url(images/img01.png);
}
#second_image {
  background: url(images/img02.png);
}
#third_image {
  position: relative;
  background: url(images/img03.png);
}