Css实现透明效果，兼容IE8

 

Css实现透明效果，兼容IE8

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月9日 17:39:24 星期三

http://fanshuyao.iteye.com/

 

 

/* background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0 !important; */
background-color:#000;
opacity:0.3;
filter:alpha(opacity=30); 

 

IE8显示效果：

 

 

谷歌内核浏览器显示效果：

 

 

下面为较完整的代码：

 

<li style="background-color:#2F8CEF;">
 <i class="icon-fire icon-4x"></i>
 <div class="service_box_content">
 <div class="service_box_title">点火通气申请</div>
       <div class="service_box_text">Ventilation application</div>
 </div>
</li>


/*下面为Css样式*/

.service_box ul li{
	width:48%;
	margin-right:8px;
	margin-bottom:8px;
	padding-top: 15px;
	height: 140px;
	display:block;
	border: solid 1px #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	position: relative;
	float: left;
}

.service_box ul li i{
	color:#fff;
}

.service_box ul li div.service_box_content{
	height: 60px;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	color: #fff;
	/* background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0 !important; */
	background-color:#000;
	opacity:0.3;
	filter:alpha(opacity=30); 
}

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月9日 17:39:24 星期三

http://fanshuyao.iteye.com/