How to set transparency in html

htmlHow to set transparency: 1. Set opacity through "background-color:rgba(0,152,50,0.7);"; 2. Use translucent particle images or gradient translucent PNG images; 3. Use transparency and background color or background image to achieve this.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Achievement of transparency effect of HTML/CSS tags

In HTML CSS programming, there are usually three ways to achieve a semi-transparent background, respectively. Is using RGBA, PNG and CSS filters.

Method 1.

The first is the transparency of HTML5. Transparent background colors are supported in H5, but unfortunately, in H5 The transparent background color only supports rgba writing, and does not support hexadecimal writing, such as:

background-color:rgba(0,152,50,0.7);// -->70%的不透明度

background-color:transparent;支持完全透明

Among traditional browsers, the uniqueness of IE browser is also a certain Uncertain factors in some transparency settings

Generally speaking, the way to achieve transparency in the firefox, webkit, and khtml camps is very simple, including IE9 and browsers greater than IE9 using the above HTML5 settings for transparency. However, this method is completely invalid in browsers below IE9.

[Recommended learning: HTML video tutorial][Recommended: css video tutorial]

# #Method 2

The second method is to use translucent particle pictures, patterns or gradient translucent PNG pictures. This method is compatible with compatibility, except for the bug that IE6 needs to use plug-ins to modify PNG opacity.

The support is very good. The settings can be repeated and positioned. The size can also be set in H5. However, if you pursue the ultimate in the web page, the fewer images you load, the better.

(Particles: Crop the image with uniform transparency to below 5px * 5px, so the loading speed is much faster)

background:url(path/my_png_bg.png) no-repeat center center scroll;

Method 3.

The third way is to use a transparent background color or background image.

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

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

Then, here comes the problem. IE6-IE8 does not support opacity at all, so you have to consider IE's filters

There are many filters in IE, among which the alpha channel is used to set whether Transparency

filter:(opactity=70)

So the above solution is modified 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 "not" transparency

In summary, it is recommended to use the third option.

Development Practice

	
		<meta>
		<title>Opacity</title>
		<meta>

		<style>
			*{
				padding: 0px;
				margin:0px;
			}
			.mainbox{
				width: 200px;
				height: 200px;
				clear: both;
				overflow: hidden;
				margin: 100px auto 0px auto;
				background-color: #f06;
			}
			.sub-mainbox
			{
				width: 250px;
				height: 200px;
				margin: -50px auto 0px auto;
				border:1px solid white;
				border-radius: 5px;
				/**background-color:rgb(0,152,50);**/
				background:url(path/my_bg.jpg) no-repeat center center scroll;
				opacity: 0.7;
				filter:alpha(opacity=70);
			}
		</style>
	
	

		<p>
			
		</p>

		<p>
			
		</p>

	

The above is the detailed content of How to set transparency in html. For more information, please follow other related articles on the PHP Chinese website!