用css实现透明效果
要用css实现透明是一件很简单的事,只需用到css3里的一个opacity声明。opacity声明用来设置一个元素的透明度:层、文字、图片等…opacity的值为1的元素是完全不透明的,反之,值为0是完全透明。
当然,因为有ie的存在,事情变得有点不太简单了。
我们先来看看css3这条语句的浏览器支持情况吧:
看来还得解决ie的问题。我们都知道css里有个alpha滤镜,可以用这个解决ie的问题。
语法: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"说明:
Opacity:起始值,取值为0-100,0为透明,100为原图.
FinishOpacity:目标值.
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="40",Style="2") 。在一般情况下只用filter:Alpha(Opacity='30')就差不多了。
下面看几个实现透明的页面截图:
源代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现图片透明</title>
<style type="text/css">
.a1{
opacity:0.1;
filter:Alpha(Opacity='10');
}
.a2{
opacity:0.3;
filter:Alpha(Opacity='30');
}
.a3{
opacity:0.5;
filter:Alpha(Opacity='50');
}
.a4{
opacity:1;
filter:Alpha(Opacity='100');
}
</style>
</head>
<body>
<img src="lufy.jpg" alt="" class="a1" />
<img src="lufy.jpg" alt="" class="a2" />
<img src="lufy.jpg" alt="" class="a3" />
<img src="lufy.jpg" alt="" class="a4" />
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现图片透明</title>
<style type="text/css">
.a1{
opacity:0.1;
filter:Alpha(Opacity='10');
}
.a2{
opacity:0.3;
filter:Alpha(Opacity='30');
}
.a3{
opacity:0.5;
filter:Alpha(Opacity='50');
}
.a4{
opacity:1;
filter:Alpha(Opacity='100');
}
</style>
</head>
<body>
<img src="lufy.jpg" alt="" class="a1" />
<img src="lufy.jpg" alt="" class="a2" />
<img src="lufy.jpg" alt="" class="a3" />
<img src="lufy.jpg" alt="" class="a4" />
</body>
好的,问题解决了,在ie和其他浏览器里都实现了透明。
但是,还存在着一个潜在的问题,继续看啦~
做网页经常要实现下面这个效果:
下面的条幅是有一定的透明度的,按理说我们可以像下面这样写:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style type="text/css">
div#pic{
width:116px;
height:163px;
padding:0;margin:0;
position:relative;
background:transparent url(bag.jpg) 0 0 no-repeat;
}
div#pic span{
padding:0;margin:0;
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#99C;
filter:Alpha(opacity:60);
opacity:0.6;
line-height:1.5em;
color:#fff;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="pic">
<span>男孩和女孩</span>
</div>
</body>
div#pic{
width:116px;
height:163px;
padding:0;margin:0;
position:relative;
background:transparent url(bag.jpg) 0 0 no-repeat;
}
div#pic span{
padding:0;margin:0;
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#99C;
filter:Alpha(opacity:60);
opacity:0.6;
line-height:1.5em;
color:#fff;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="pic">
<span>男孩和女孩</span>
</div>
</body>
可是,出现的效果是这样的:
可以看出来,文字也透明了?也就是说如果父元素被设计了透明度,子元素也会变得透明,即使把它的透明度设为1或100也会依然是透明的。
那如何解决,让文字要成为透明元素的子元素就成了!
我们要再添加一个P元素作为透明的色块,然后把p和span绝对定位到合适的位置。
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<title>透明</title>
<style type="text/css">
div#pic{
width:116px;
height:163px;
padding:0;margin:0;
position:relative;
background:transparent url(bag.jpg) 0 0 no-repeat;
}
div#pic p{
padding:0;margin:0;
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#99C;
filter:Alpha(opacity:60);
opacity:0.6;
height:20px;
}
div#pic span{
position:absolute;
bottom:0;
left:0;
display:block;
width:100%;
font-size:14px;
color:#fff;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="pic">
<p></p>
<span>男孩和女孩</span>
</div>
</body>
<style type="text/css">
div#pic{
width:116px;
height:163px;
padding:0;margin:0;
position:relative;
background:transparent url(bag.jpg) 0 0 no-repeat;
}
div#pic p{
padding:0;margin:0;
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#99C;
filter:Alpha(opacity:60);
opacity:0.6;
height:20px;
}
div#pic span{
position:absolute;
bottom:0;
left:0;
display:block;
width:100%;
font-size:14px;
color:#fff;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="pic">
<p></p>
<span>男孩和女孩</span>
</div>
</body>
效果就是下面这个样子了:
当然,实现这个效果的方法肯定不止这一种,你能想到更好的方法吗?