要用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://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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 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 >
效果就是下面这个样子了:
当然,实现这个效果的方法肯定不止这一种,你能想到更好的方法吗?