Posts in current category

Introduction to CSS translucent properties and code instances


May 04, 2021 02:00 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

CSS transparent code compatible with major browsers:

.transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

The above properties are:

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.

④-khtml-opacity: 0.5; T his is to support some older versions of Safari.

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:


Introduction to CSS translucent properties and code instances


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


Introduction to CSS translucent properties and code instances

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;/*必需*/

_height:250px;/*必需*/

overflow:hidden;

background-color:#FF0000;/*背景色*/  }

.alpha1{

filter:alpha(opacity=20);/*IE透明度20%*/  }

.alpha2{

background-color:#FFFFFF;

-moz-opacity:0.8;/*MozFF透明度20%*/

opacity:0.8;/*支持CSS3的浏览器(FF1.5也支持)透明度20%*/  }

.ap2{

position:absolute;  }

.alpha1,.alpha2{

width:100%;

height:auto;

min-height:250px;/*必需*/

_height:250px;/*必需*/

overflow:hidden;

background-color:#FF0000;/*背景色*/  }


Try it out . . .