Utilizing these RGBA colors you can set the color of the background as well as its transparency without affecting the text on it. Your email address will not be published. High quality full screen width hero images are a staple in modern web design. In fact I have a question in the CSS .. Can I use on the background of the class “opacity” only without affecting the text? The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. On the other hand if you will try to do this using the CSS opacity property, it will not only change the opacity of the background but also changes the opacity of all the child elements as well. How-to in 1 minute: CSS Background Color Opacity Without Affecting Text …, Change the value of the opacity property in the CSS ccode to make sure that only the background image is affected. To make that pseudo-element the same size as the parent, you’ll have to absolutely position it and set its top, right, bottom, and left values to zero so it doesn’t collapse. The back part of the background is still slightly visible to the viewer.This can be useful when you want to add a text to the container. By default, only responsive, group-hover, focus-within, hover and focus variants are generated for text opacity utilities. CSS Background Opacity Without Affecting the Child Elements, How to change the opacity of an element's background without affecting the child There is no CSS property like "background-opacity" that you can use only for changing the Opacity Using RGBA Colors