DDR爱好者之家

CSS 很酷的透明样式
站长资源 2024/11/24 佚名
2 1538
DDR爱好者之家 Design By 杰米
我们今天这里不重点讨论怎么制作带有透明效果的 .png格式图片，我们来讨论怎么让它在网页中完美的显示出它的透明的魅力。

精灵空间不少地方都有很酷的透明效果。 （下面附上几个截图效果）。

CSS 很酷的透明样式

首页

 

CSS 很酷的透明样式

 

精灵空间

 

CSS 很酷的透明样式

 

背景音乐和网页收藏

 

CSS 很酷的透明样式

 

图片浏览和图片收藏

 

CSS 很酷的透明样式

 

视频播放和视频收藏

如果你对图片保存格式有些了解的话，你会发现 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里面就将覆盖或者添加样式的属性，实现透明效果。有兴趣的朋友，不防一试。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米