本文章主要是利用到css中的filter来实现背景半透明了,下面小编来给各位整理几个实例,希望对各位同学会有所帮助。
这里用到了IE的filter的滤镜效果,background:rgba是CSS3属性,大家都知道。
最后一句是针对IE9的。用了结构性伪类 E:root : {attribute} , 伪类:root 仅支持CSS3的浏览器 ,所以这段CSS是兼容所有浏览器的。
核心代码
代码如下
复制代码
#header{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E518515F', endColorstr='#E518515F');
background:rgba(24, 81, 95, 0.9);
}
:root #header { filter:none; }/*把IE9的filter去掉,因为IE9也支持background:rgba(),所以去掉filter,不然会导致重复*/
实例
代码如下
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
IE背景半透明
</title>
<style type="text/css">
.alpha{
width: 100px;
height: 100px;
color: #fff;
background: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)9;
}
:root .alpha{
filter: none;/*for IE9*/
}
</style>
</head>
<body>
<div class="alpha">
文字文字
</div>
</body>
</html>