<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rgba与opacity/filter的区别</title>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}
#nav{
width: 960px;
height: 50px;
line-height: 50px;
background-color: rgba(13,83,188,0.8);
margin:0 auto;
}
#nav ul li{
float: left;
width: 19.91%;
text-align: center;
}
#nav ul li:nth-child(even){
border-left:1px solid #fff;
border-right:1px solid #fff;
}
#nav ul li a{
font-size: 14px;
color: #FFFFFF;
}
#nav ul li:hover{
cursor: pointer;
background-color: lightgray;
}
#nav ul li:hover a{
color:rgb(13,83,188);
}
#imgList{
width: 200px;
margin:100px auto;
height: 200px;
border:1px solid #000000;
background:url("../images/big-4.jpg") no-repeat 100% 100%;
position: relative;
}
#imgList>div{
position: absolute;
top:25px;
left: 25px;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
/*文字不会跟随父元素变得半透明*/
/*background:rgba(0,0,0,0.5);*/
/*文字跟随父元素变得半透明*/
background:rgb(0,0,0);
opacity:0.5;
filter: "alpha(opacity=60)"; /*兼容 IE 8 */
filter: alpha(opacity=60); /*兼容 IE 4-7 */
}
#imgList>div>span{
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<div>
</div>
<nav id="nav">
<ul>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">BRANDS</a></li>
<li><a href="#">OUR SERVICE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div bgcolor="#336699">
<div id="imgList">
<div>
<span>Colors</span>
</div>
</div>
<h4>说明:background:rgba(0,0,0,0.5);子元素不会跟随父元素变得半透明，不需和opacity、filter配合使用</h4>
<h4>说明:background:rgb(0,0,0);opacity:0.5;子元素会跟随父元素变得半透明，彼此需要配合使用，并且要使用filter来兼容低版本IE浏览器</h4>
</div>
</body>
</html>
说明:background:rgba(0,0,0,0.5);子元素不会跟随父元素变得半透明，不需和opacity、filter配合使用
说明:background:rgb(0,0,0);opacity:0.5;子元素会跟随父元素变得半透明，彼此需要配合使用，并且要使用filter来兼容低版本IE浏览器