HTML to set a translucent background with CSS

Html/css the implementation of the transparency effect of the label, in HTML, the implementation of a semi-transparent background, in the HTML DIV+CSS programming, in order to achieve the version of transparency, usually there are 3 practices.

The first is HTML5 transparent, support transparent background color in H5, but unfortunately, the transparent background color in H5 only supports the RGBA shampoo, does not support 16 binary notation

such as:

Background-color:rgba (0,152,50,0.7);//-->70% opacity background-color:transparent; support for full transparency

in traditional browsers, the uniqueness of Internet Explorer is also a factor of uncertainty in certain transparency settings.

In general, the way to achieve transparency in the Firefox and webkit,khtml camps is very simple, including ie9+ and browsers larger than IE9 using the HTML5 settings above.

The second is to use a translucent particle image, pattern, or gradient translucent png image, this method is compatible, except IE6 need to use plug-ins to modify the PNG opaque bug,

Support is very good, settings can be repeated, but also can be located, in the H5 can also be set size, but in the pursuit of extreme in the Web page, the less the better.

(particle: A picture with a transparent symmetry clipped to 5px * 5px, which loads much faster)

Background:url (path/my_png_bg.png) no-repeat Center Center Scroll;

The third way is to use the transparency + background color or background image to achieve.

Background-color:rgb (0,152,50); opacity:0.7;

Background:url (path/my_bg.jpg) no-repeat Center Center scroll;opacity:0.7;

So, the problem comes, IE6-IE8 completely does not support opacity, so also have to consider the IE filter

There are many filters in IE that use the alpha channel to set the opacity

Filter: (OPACTITY=70)

The above-mentioned schemes are therefore reformed as follows

Background-color:rgb (0,152,50); Opacity:0.7;filter:alpha (opacity=70);

Background:url (path/my_bg.jpg) No-repeat Center Center Scroll;opacity:0.7;filter:alpha (OPACITY=70);

Note: The value of opacity or Alpha emphasizes "no" transparency

The third option is recommended

 
 

 

 
try doing it;
HTML to set a translucent background with CSS