html透明gif,CSS很酷的透明样式
我们今天这⾥不重点讨论怎么制作带有透明效果的 .png格式图⽚，我们来讨论怎么让它在⽹页中完美的显⽰出它的透明的魅⼒。精灵空间不少地⽅都有很酷的透明效果。(下⾯附上⼏个截图效果)。
⾸页
精灵空间
背景⾳乐和⽹页收藏
图⽚浏览和图⽚收藏
视频播放和视频收藏
如果你对图⽚保存格式有些了解的话，你会发现 gif图⽚是可以保留部分透明效果的，在⽹页中直接使⽤ gif图⽚的话，可以部分透明，但效果并不完美，⽐如图⽚边沿不整齐，不能半透明等等。实际上，还有⼀种⽹页中很常⽤的 .png格式的图⽚可以很完美的保存图⽚的透明效果。在 ps中设计出来的各种透明半透明效果，只要你正确的将它保存为 .png格式的话，图⽚打开的效果⼏乎和在 ps中是⼀样的，边沿很光滑，透明度也都⼀致。我们今天这⾥不重点讨论怎么制作带有透明效果的 .png格式图⽚，我们来讨论怎么让它在⽹页中完美的显⽰出它的透明的魅⼒。
也许也有朋友尝试过要做出⼀些透明的效果，也有朋友知道 .png图⽚可以是有透明效果的，但是怎么⼀放到⽹页⾥⾯，显⽰的效果就变味了呢？
事实上， firefox是可以直接完美的⽀持 .png图⽚的透明效果的。不信朋友们现在就可以试试，在⽹页⾥⾯插⼊任何⼀个带有透明效果的
.png图⽚，⽤ firefox打开。
只可惜，现在毕竟还是使⽤ ie的同志占多数。偏偏 ie⾥⾯不能直接出这种效果。但肯定是有办法解决的。我们知道 ie是⽀持滤镜的。也许不少朋友也知道滤镜可以做⼀些很不错的效果出来，但也许你不
是很了解“ AlphaImageLoader ”这个滤镜。它起的作⽤就是在 html dom元素的背景和内容之间的导⼊⼀层图⽚。如果这个图⽚是带有透明样式的 .png图⽚，它将完美的保留其透明样式，并且在完全透明的部分，是⿏标可穿透的。
我们来看⼀个在 ie⾥⾯的完整的透明样式定义：
background-color : transparent ;
background-image : none ;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="test.png", sizingMethod="crop") ;
⾸先，你要把样式的背景颜⾊和背景图⽚都设置为没有。然后⽤滤镜导⼊⼀个 .png图⽚，原则上就 ok了，其实也很简单。
当然我们不能只顾 ie⾥⾯如何。⼀般情况下，我们还需要考虑如何兼容 firefox。上⾯已经说过了，在 firefox⾥⾯其实是可以直接兼容
.png的透明格式的，所以这⾥更简单：
width : 16px ;
height : 42px ;
background : transparent url(images/Red_03.png) no-repeat ;
下⾯综合起来看这个兼容的样式应该怎么写：
. Transparent {
width : 16px ;
height : 42px ;
background : transparent url(images/transparent.png) no-repeat ;
怎么制作网页图片}
* html .Transparent {
background-color : transparent ;
background-image : none ;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ transparent.png", sizingMethod="crop") ;
}
为什么这样可以兼容呢？
⾸先我们看，.Transparent这个样式本⾝就是兼容firefox的。⽽后⾯的* html这个符号只有ie可以识别，熟悉样式兼容的朋友肯定经常⽤到这个写法。那么* html . Transparent在ie⾥⾯就将覆盖或者添加样式的属性，实现透明效果。有兴趣的朋友，不防⼀试。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。