Get the App
SLTechnology News&Howtos  ›  Development  › 

How to use RGBA colors in CSS

Shulou Source: shulou.com Published: 2022-06-01 10:44:26 10月12日 Update

This article will explain in detail how to use the RGBA color in CSS, Xiaobian thinks it is quite practical, so share it with you for a reference, I hope you can gain something after reading this article.

There is no CSS property like " background-opacity," which can only be used to change the opacity or transparency of an element's background without affecting its children. On the other hand, if you try to do this using the CSSopacity attribute, it changes not only the opacity of the background, but also the opacity of all child elements.

In this case, you can use the RGBA colors introduced in CSS3, which include alpha transparency as part of the color value. With RGBA colors, you can set the color of the background and its transparency, as shown in the following example:

Try this code:

CSS Opacity Using RGBA Colors

body {

background-image: url("images/pattern.jpg");

}

p {

padding: 20px;

background: rgba(0, 0, 0, 0.6);

color: #fff;

font: 18px Arial, sans-serif;

}

Setting background transparency without affecting the text content.

About "how to use RGBA color in CSS" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Tags: Color transparency elements article background attributes more good practical code including content on the other hand situation articles knowledge examples references try help Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Tech Info Linux Redmi NVidia Docker