How Can I Overlay a CSS Gradient on a Background Image?

Overlaying CSS Gradient onto Background Image

Many developers encounter difficulty when attempting to simultaneously display a background image and a linear gradient. The goal is to create a gradual transition, typically from black to transparent, at the bottom of the background. However, in most cases, only the gradient or the image is visible, not both.

The solution to this issue lies in correctly specifying the order of elements in the background style. To successfully overlay the gradient onto the image, follow this revised syntax:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

By placing the background image URL at the end of the line, we ensure that it appears beneath the gradient, allowing both elements to be visible.

The above is the detailed content of How Can I Overlay a CSS Gradient on a Background Image?. For more information, please follow other related articles on the PHP Chinese website!