How Can I Make a Background Image Partially Opaque While Keeping Text Fully Opaque in HTML?

Achieving Partial Opacity for Background Images with Transparent Text

In HTML, it is possible to set an opacity value to elements using the "opacity" property. However, when applying opacity to a div with a background image, the text within the div also becomes less opaque.

To resolve this issue, one solution involves using a "linear-gradient" background image. Here's how you can achieve this:

<div><p>.myDiv {<br>  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");<br>}<br>

By using a linear-gradient background image with a transparent color (rgba(255,255,255,0.5)), we can create a translucent background while maintaining full opacity for the text. The "rgba" color format specifies the red, green, blue, and alpha (transparency) values, with the alpha value set to 0.5 for 50% transparency.

The "url" property then specifies the path to your background image. By combining the linear gradient and the background image, we create a partially transparent background with fully opaque text.

The above is the detailed content of How Can I Make a Background Image Partially Opaque While Keeping Text Fully Opaque in HTML?. For more information, please follow other related articles on the PHP Chinese website!