How Can I Overlay a Color on a Background Image Using Only CSS?

Overlaying Images with Color Using CSS

Seeking a method to enhance your website's visuals by overlaying a color on a background image without resorting to additional elements? CSS provides an elegant solution that eliminates the need for extra DIVs or hover effects.

Utilizing Gradient for Overlay

One approach involves utilizing multiple backgrounds. For instance, you can create a translucent gradient over your image:

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

Employing Inset Shadow

Alternatively, you can create a substantial inset shadow:

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

Insert this CSS block within the parent element of the background image.

Both these techniques achieve the desired effect, allowing you to add a single-color overlay to your background image using solely CSS.

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