HTML 使用CSS 設置透明度Opacity

時間 2019-11-13

標籤 html 使用 css 設置透明度 opacity 欄目 HTML 简体版

原文原文鏈接

HTML/CSS標籤透明度效果的實現

在HTML+CSS編程中,實現半透明背景，一般有3中作法，分別是使用RGBA，PNG和CSS filter。css

方法一.

第一種是HTML5的透明，在H5中支持透明背景顏色，但遺憾的是，H5中的辦透明背景顏色只支持 rgba的寫法，不支持16進制的寫法如：html

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

background-color:transparent;支持徹底透明

在傳統瀏覽器中，IE瀏覽器的獨特性也是某些透明度設置的不肯定性因素web

通常來講，firefox和webkit,khtml陣營中實現透明的方式很是簡單，也包括IE9+及大於IE9的瀏覽器使用上述HTML5設置透明。可是此方法，在IE9如下的瀏覽器中徹底無效。chrome

方法二

第二種是使用半透明粒子圖片，圖案或者漸變半透明PNG圖片，這種方法是兼容性兼容性的，除了IE6須要使用插件來修改PNG不透明的bug外，編程

支持性很是好,設置能夠重複，還能夠定位，在H5中也能夠設置大小，不過在網頁中追求極致的話加載圖片越少越好。瀏覽器

（粒子：透明度勻稱的圖片裁剪至5px * 5px如下，這樣加載速度要快的多）ui

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

方法三.

第三種方式是使用透明度+背景顏色或者背景圖片來實現。url

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

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

那麼，問題來了，IE6-IE8徹底不支持 opacity,因此還得考慮一下 IE的濾鏡spa

IE中有不少濾鏡，其中使用alpha通道來設置不透明度firefox

filter:(opactity=70)

所以上述方案改造以下

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);

注意：opacity或者alpha的值強調的是「不」透明度

綜上所述，推薦使用第三種方案。

開發實踐

<html>
	<head>
		<meta charset="utf-8">
		<title>Opacity</title>
		<meta http-equiv="X-UA-Compatible" content="IE=7,chrome=1.0">

		<style type="text/css" rel="stylesheet">
			*{
				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>
	</head>
	<body>

		<div class="mainbox">
			
		</div>

		<div class="sub-mainbox">
			
		</div>

	</body>
</html>

try doing it;