To set the background of an element to transparent, it is like this in chrome, firefox, and opera:
[Css]
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:
[Css]
Background-color: rgb (0, 0, 0 );
Filter: alpha (opacity = 40 );
Opacity indicates 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:
[Html]
<Body>
<Div class = "non-transparent">
Aaaaa
</Div>
</Body>
<Div class = "transparent">
<Div class = "box">
Box
</Div>
</Div>
CSS code:
[Css]
. 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. The effect is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
