Examples of setting a translucent background in CSS

No image translucent background css

If you use the background color and opacity to set the transparency, the text in the child element is also transparent.

Case 2: Use a background image with a png transparency. In this case, the gray background of the PNG image must be processed for IE6.

Method 3: Use rgba in combination with dedicated hack to be compatible with conventional browsers.

Rgba fills in the background color and sets the transparency. This does not cause sub-elements to inherit its transparency. For example: background: rgba (0.5, 0,); this sentence is suitable for browsers that support CSS3.0. However, for IE6, IE7, and IE8, we can use the gradient of the IE Filter to set the color of the start and end colors. The code is as follows:

The code is as follows:	Copy code
Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = '# 9a000000', endColorstr =' # 9a000000') 9

(9A is the hexadecimal mechanism of transparency. For example, as we all know above, the value of transparency in IE is 1% ~ 100%, and in the color, when the transparency is 100%, it is the RGB full value of 255. At this time, if you want to set the transparency of 0.6, you need to use 255*0.6 = 153, at this time, this 154 is decimal, and we still need to convert it to hexadecimal format for use. After Baidu's converter, we can see that it is 9A, so we need to add 9A before the start and end colors)

The specific parameter meanings are as follows:

Pacity transparency. The default range is from 0 to 100. They are actually percentages. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque.
Finishopacity is an optional parameter. If you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.
Style specifies the shape features of the transparent area: 0 represents the unified shape, 1 represents the linear shape, 2 represents the radial shape, 3 represents the rectangle
X coordinate at the beginning of the startx gradient transparency effect.
Y coordinate at the beginning of the starty gradient transparency effect.
The X coordinate at the end of the finishx gradient transparency effect.
The Y coordinate at the end of the finishy gradient transparency effect.

You can set only one opacity.
For example:
{Filter: alpha (opacity = 50 )}
This is the translucent setting. You only need to add the code in {} to the {} in the template to be set. Remember to use the ";" interval with the previous code, otherwise, the settings are invalid.

For example:
I want to set the background color (white) + translucent for the template area
As long
. Modbox {}
. Modbl {}
. Modbc {}
. Modbr {}
Background-color: white
These are the template background settings ID.

Then add one in. modbox,. modbl,. modbc,. modbr {} without this.
Add filter: alpha (opacity = 80) to achieve the translucent effect of the background of all templates.

If you want to display only the background of a blog like me, and everything else is transparent, add the background transparent code to other templates.
Background: transparent this is the fully transparent background code.

However, the main area of the template is transparent, but there will be a color under it, so in addition
. Modbl {}
. Modbc {}
. Modbr {}
Add fully-transparent background code to make the template area completely transparent, just like what I do now

In addition, this parameter can only be used to set the background color. The background image cannot be set to translucent.

I will post the translucent background code.

The code is as follows:

Copy code

. Modbox {padding: 10px 10px 0 10px; background-color: # FFFFFF; border-left: 1px solid #813533; border-right: 1px solid #813533} . Modbl {background: transparent; border-left: 1px solid #813533; border-bottom: 1px solid #813533; line-height: 1px} . Modbc {background: transparent; border-bottom: 1px solid #813533; line-height: 1px} . Modbr {background: transparent; border-right: 1px solid #813533; border-bottom: 1px solid #813533; line-height: 1px} . Modbox,. modbl,. modbc,. modbr {filter: alpha (opacity = 80);-moz-opacity: 0.8; width: auto! Important; width: 100%}

The red text is the key setting. If you do not want to set it to fully transparent, you can set it. modbl {}. modbc {}. in modbr {}, change the value of background: transparent. in modbox {}, background-color: # FFFFFF. Of course, you can replace # FFFFFF here with your favorite color, but for the sake of beautiful appearance, we recommend that the four color codes be the same.

Appendix: # FFFFFF is white, white; #000000 is black, black

Ah, I'm exhausted. I hope you can learn it ........................

However, the main area of the template is transparent, but there will be a color under it, so in addition
. Modbl {}
. Modbc {}
. Modbr {}
Add fully-transparent background code to make the template area completely transparent, just like what I do now

In addition, this parameter can only be used to set the background color. The background image cannot be set to translucent.

I will post the translucent background code.

The code is as follows:

Copy code

. Modbox {padding: 10px 10px 0 10px; background-color: # FFFFFF; border-left: 1px solid #813533; border-right: 1px solid #813533} . Modbl {background: transparent; border-left: 1px solid #813533; border-bottom: 1px solid #813533; line-height: 1px} . Modbc {background: transparent; border-bottom: 1px solid #813533; line-height: 1px} . Modbr {background: transparent; border-right: 1px solid #813533; border-bottom: 1px solid #813533; line-height: 1px} . Modbox,. modbl,. modbc,. modbr {filter: alpha (opacity = 80);-moz-opacity: 0.8; width: auto! Important; width: 100%}

The red text is the key setting. If you do not want to set it to fully transparent, you can set it. modbl {}. modbc {}. in modbr {}, change the value of background: transparent. in modbox {}, background-color: # FFFFFF. Of course, you can replace # FFFFFF here with your favorite color, but for the sake of beautiful appearance, we recommend that the four color codes be the same.

Appendix: # FFFFFF is white, white; #000000 is black, black

For other IE browsers that are still different, you have to add the following: background: rgba (0.6, 0,) 9. If you see this on other websites, the above is still to be tested. busy these days, probably recorded first

View some instances

To set the background of an element to transparent, it is like this in chrome, firefox, and opera:

The code is as follows:	Copy code
Background-color: rgba (0, 0, 0, 0.4 ); Background-color: rgba (0, 0, 0, 0.4 );

The last parameter 0.4 in rgba is the expected transparency in the range of 0 ~ Between 1.

 

In ie, it is generally like this:

The code is as follows:	Copy code
Background-color: rgb (0, 0, 0 ); Filter: alpha (opacity = 40); opacity

Transparency. Its value ranges from 0 ~ Between 100

So how can we be compatible with various browsers? Just write them together.

Ie does not support rgba, so it will be ignored. Other browsers generally ignore unsupported ones.

The following is an example:

HTML code:

 

The code is as follows:	Copy code
<Body> <Div class = "non-transparent"> Aaaaa </Div> </Body>   <Div class = "transparent"> <Div class = "box"> Box </Div> </Div>

CSS code:

The code is as follows:	Copy code
. Non-transparent: hover { Background-color: yellow; } . Transparent { Position: absolute; Top: 0; Left: 0;   Text-align: center;   Width: 100%; Height: 100%;   Filter: alpha (opacity = 40 ); Background-color: rgb (0, 0, 0 );   Background-color: rgba (0, 0, 0, 0.4 ); } . Box { Background-color: yellow; Width: 50%; Height: 50%;   Position: relative; Left: 5%; Top: 10%; }

Display effect:

Chrome:

Firefox:

Opera:

Ie8:

 

In addition, chrome, firefox, and opera can also be used as follows:

Opacity: 0.4;

In this case, the transparency of all child elements is set to the same value, as shown in the following figure: