Introduction to CSS translucent properties and code instances
May 04, 2021 CSS
Table of contents
When we are doing web pages, sometimes in order to the overall page with the beautiful, you need to set the layer style to transparent or translucent, because transparency often produces good page visual effects. I n the background of the page used, if you do not set the page content area to translucent state, not highlight the role of the background, but also appear less coordinated. T he traditional CSS method for achieving a translucent background effect is to use two layers, one with text and the other with a transparent background, but the effect of a transparent filter affects the contents. If you only need to implement under IE, there is an easier way to do it.
CSS translucent properties
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
① opacity : 0.5; T his is most important because it is the CSS standard. This property supports Firefox, Safari and Opera.
②filter:alpha(opacity=50); This is for IE6, with a desirable value of 0-100 and the other three 0 to 1.
③-moz-opacity:0.5; T his is to support some older versions of the Mozilla browser.
CSS transparency inheritance issues
The transparent properties of CSS involve an inheritance issue, and when transparency is set for parent elements, child elements automatically inherit their transparency, such as the effect of the following image:
Even if you specify transparency of 1 for child elements, it is not valid.
For cases where child elements are text, the general solution is that if you can see more or less, it doesn't matter. A nother compromise is to specify a relatively dark color for the text child elements. T hat is, when child elements inherit transparency, the resulting text color is exactly what you want. The premise is that the color also has the possibility of deepening, and that the values of color and transparency need to be calculated in detail.
There is also the term "de-transparency inheritance", which is not very accurate and there is virtually no way to eliminate transparency inheritance. It can only be said that some hacks can be used when you want to implement "multiple element overlays that only make the specified elements transparent."
Another good implementation: add an empty element as a transparent layer, and add a peer element to an element that doesn't want to be transparent but wants to achieve an override effect. P
arent elements are
position:relative
T
he two child elements are
position:absolute
for overlays.
For specific explanations, please click on this link
Translucent under IE
HTML code:
<div class="alpha1">
<div class="ap2">
<p>背景为红色(#FF0000)，透明度20%。</p>
</div>
</div>
CSS code:
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter:Alpha(Opacity=30); }
.ap2{
position:relative; }
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter:Alpha(Opacity=30); }
Try it out . . .
Compatible with FF, OP writing:
The two layers overlap in a way that changes the page structure to the CSS style
HTML code:
<div class="alpha1">
<div class="ap2">
<p>背景为红色(#FF0000)，透明度20%。</p>
</div>
<div class="alpha2">
</div>
</div>
CSS code:
.alpha1,.alpha2{
width:100%;
height:auto;
MIN-Height: 250px; / * Required * /
_Height: 250px; / * Required * /
overflow:hidden;
Background-color: # ff0000; / * background color * /}
.alpha1{
Filter: alpha (opacity = 20); / * IE transparency 20% * /}
.alpha2{
background-color:#FFFFFF;
-Moz-opacity: 0.8; / * Mozff Transparency 20% * /
Opacity: 0.8; / * Support CSS3 browser (FF1.5 also supports) transparency 20% * /}
.ap2{
position:absolute; }
.alpha1,.alpha2{
width:100%;
height:auto;
MIN-Height: 250px; / * Required * /
_Height: 250px; / * Required * /
overflow:hidden;
Background-color: # ff0000; / * background color * /}
Try it out . . .