设置背景透明文字内容不透明方法
效果图如下:
<!--
设置背景透明文字内容不透明方法
兼容ie全家族
Copyright 2017-9-25, Jachin
QQ: 381558301
Email: 381558301@qq.com
关键点
position:relative 设置子元素为相对定位,可让子元素不继承Alpha值
filter:Alpha(opacity=50); 只支持IE6、7、8、9
-->
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>设置背景透明文字内容不透明方法</title>
<style type="text/css">
.container{
height: 200px;
width: 400px;
padding-left: 20px;
background: #ff9900;
overflow: hidden;
}
.box{
height: 50px;
width:200px;
background: rgba(0,0,0,0.3);
line-height: 50px;
margin-top: 50px;
}
.box p{
color: #ffffff;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 也就是只有这几个内核可识别\0screen\,screen\9这串东西*/
.box{
background-color:#000000;
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.box p{
position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>My name is Jachin.</p>
</div>
</div>
</body>
</html>