How to set the background color to be transparent in css? Introduction to two methods of setting background color transparency in css

In web page layout, sometimes for the overall beauty of the web page, it may be necessary to set some parts of the web page to have a transparent background color. So how to set the background color to be transparent? This article will introduce to you how to set the background color to be transparent using CSS.

There are two ways to set the background color transparency in css: One is to set it through rgba, and the other is to set it through backgroud and opacity.

Let’s take a look at the specific examples of these two methods in css to achieve transparent background color

1. Set the background color to be transparent through backgroud and opacity

The attribute value in the background attribute is relatively simple, so I won’t go into details here. You can refer to the css learning manual to learn about it. Let’s take a brief look at the opacity attribute here.

opacity attributeThe "opacity" of the parameter is represented by a number, ranging from 0.0 to 1.0. Fully transparent is 0.0, and fully opaque is 1.0, in other words, a higher number means the element is more opaque. In addition to "opacity" parameters, there is also inherit Inherits the properties of the parent layer, but browser support is poor and is not recommended.

After reading the introduction of the two attributes, let's look at a specific example of setting the background color transparency through backgroud and opacity.

The code is as follows:

<div class="box"></div>

.box{
  width:300px; 
  height:200px; 
  margin:0 auto; 
  border:1px solid #ccc; 
  background:red; 
  opacity:0.2;  
}

The background color is transparent The effect is as follows:

Instructions: Set the background color transparency through backgroud and opacity. If there is text on the background, the text will also become transparent, just like the effect below

So it depends on the situation to use this method to set the background color to be transparent.

Recommended related articles:
1. How to achieve background transparency in css in web design? (Example)
2.Two methods to achieve translucent background color in css
3.How to set transparency in css? Two methods of setting transparency (code examples)
Related video tutorials:
1.CSS Video Tutorial-Jade Girl Heart Sutra Edition

2. Set the background color to be transparent through rgba method

The so-called RGBA color is the three primary colors of RGB plus ALPHA. Provides transparency properties while adding color to the background.

Usage: background:rgba(R,G, B, A);

Let’s look at a specific example of setting the background color transparency through rgba:

<div class="title_div">背景颜色透明</div>

.title_div{ 
  width: 200px;
        height: 200px; 
        line-height: 30px;
        text-align: center;
         margin:0 auto;
         background-color:rgba(220,38,38,0.2);
}

The effect of setting background color transparency in rgba method is as follows:

Description: By setting background color transparency in rgba method, you can set the background color to be transparent and the text to be opaque, but the compatibility of this method is limited. No, it is not compatible with IE browser

This article ends here. For more knowledge about css, you can refer to the php Chinese websitecss video tutorial, css3 video tutorial, css learning manual and css3 learning manual for further study.

The above is the detailed content of How to set the background color to be transparent in css? Introduction to two methods of setting background color transparency in css. For more information, please follow other related articles on the PHP Chinese website!