The first thing to note is that the background is the ancestor element of the content. If it is a sibling node then there is no need to record this article.
Record it and know what it is.
ie8-Features:
1. does not support "opcity:0.5;" This notation only supports "Filter:alpha (opacity=50)".
2. If the background element has a CSS property set to the value of Z-index (except for the default auto), the content will be semitransparent with the background element
3. If the content element of the background element itself or its ancestor nodes (these ancestor nodes are descendant nodes of the background element), the CSS positioning property position:relative/absolute/fixed is not set. The content will also be translucent with the background elements.
4. Support "Background:rgb (0,0,0)" To set the background color, but does not support "Background:rgba (0,0,0,0.5)" This setting background color colleagues set the translucent way.
ie9+, Chrome, Firefox features:
1. Support "opacity:0.5", but the content will be translucent with the background
1. Support "Background:rgba (0,0,0,0.5)" This setting background color colleague sets the background translucent but the content is not transparent way.
2. If a colleague uses opacity=0.5 and Rgba opacity to 0.5, the effect is to be translucent again in RGBA mode with the opacity set by the element opacity. The semi-transparency of the final background is opacity*rgba=0.5*0.5=0.25.
ie9+ also has a feature that supports both opcity:0.5 and the "Filter:alpha (opacity=50)" approach. As a result, RGBA and filter are used together with the third case.
So the combination of the above browser features, compatible with all browser scenarios is the background element setting style for
/* Cannot set Z-index, according to the circumstances set the desired background color, chrome/firefox in the first sentence function; ie in the latter two sentences function * /. background{ Background:rgba ( 0,0,0,0.5);/*firefox, chrome*/ background: #000 \9;/*ie*/ Filter:alpha (opacity=50);/*ie*/ }Code interpreted as in Firefox, Chrome next two sentences will not be recognized, so use RGBA to do the background translucent content opaque; ie the second sentence of the background will cover the first sentence, so the end result is the latter two sentences play a role.
The style of the content element is
/* You can set the element or its ancestor node as the positioning style relative/absolute/fixed*/.content{ position:relative; }Full instance
<!DOCTYPE HTML><HTMLLang= "CH-CN"> <Head> <MetaCharSet= "Utf-8"> <styletype= "Text/css">Html,body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, pre, Code, form, fieldset, legend, Input, button, TextArea, p, blockquote, TH, TD{margin:0;padding:0; } *{-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box; } /*can not set Z-index, according to the circumstances set the desired background color, chrome/firefox in the first sentence function; ie in the latter two sentences function*/. Background{background:Rgba (0,0,0,0.5);/*Firefox, Chrome*/background:#000 \9;/*IE*/Filter:Alpha (OPACITY=50);/*IE*/ } /*you can set an element or its ancestor node as the anchor style relative/absolute/fixed*/. Content{position:relative; } </style> </Head> <Body> <Divstyle= "width:50px;height:50px;border:1px solid;background:red;"></Div> <Divclass= "Background"style= "width:200px;height:200px;"> <Divclass= "Content"style= "width:50px;height:50px;background:red;"></Div> </Div></HTML>
As follows
Compatible with IE, Firefox background opaque content settings
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
