CSS transparent attribute detailed code _css/html

Source: Internet
Author: User
Transparency often produces good web visuals, first with CSS-transparent code compatible with mainstream browsers:
Copy Code code as follows:

. transparent_class {
Filter:alpha (OPACITY=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}

Several of the above attributes are:
opacity:0.5; This is the most important because it is CSS standard. This property supports Firefox, Safari and Opera.
Filter:alpha (OPACITY=50); This is for IE6, the value is 0-100, the other three 0 to 1.
-moz-opacity:0.5; This is to support some old versions of Mozilla browsers.
-khtml-opacity:0.5; This is to support some old versions of Safari browsers.
CSS Transparency Inheritance Issues
However, the transparent properties of CSS involve an inheritance problem, and when you set transparency for the parent element, the child automatically inherits its transparency, even if you specify 1 for the child element.
As for the child element is the text situation, my solution is generally if how many still can see, no matter. Another way to compromise is to specify a darker color for the text-book element. In other words, when the child element inherits transparency, the resulting text color is exactly what you want. The premise is that there is a possibility for this color to deepen, and a value that requires detailed calculation of color and transparency.
There is also the assertion that "the abolition of transparency inheritance" is not very accurate and, as far as I know, there is no way to remove the transparency inheritance. You can only say that when you want to implement "multiple element overrides, only the specified element is transparent," some of the hack are available.
Search, find a good way to achieve this effect-a question about transparency inheritance, interested friends can see. The principle is simple, adding an empty element as a transparent layer, and an element that does not want to be transparent but implements the overlay effect as a sibling element. The parent element uses position:relative positioning; Two child elements use Position:absolute positioning to implement overrides.
HTML code:
Copy Code code as follows:

<div class= "Div3" ><div class= "Div4" ></div> there's no transparency in the text picture.
<div class= "Div2" > Pictures </div>
</div>

CSS Code
Copy Code code as follows:

Body {
Background-image:url (./105247.png);
Background-repeat:repeat;
}
. div2{width:100px height:100px background:url (./testbok.png)}
. div3{width:200px; height:200px position:relative; margin-top:10px}
div4{Position:absolute; top:0 height:200px; width:200px; z-index:-1; background: #FFFFFF; Filter:alpha (opacity=70) ; opacity:0.7;}

If your outer container is highly variable, just set the height of the div3 to a high enough height.
This method has a very bad disadvantage: a more blank div
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.