当前位置: 网站建设 > 网页设计 > 建站经验 >

用CSS实现像vista一样很酷的透明效果(附图)

时间:2013-03-02 04:07来源:未知 作者:admin 点击:

标签:用CSS实现像vista一样很酷的透明效果(附图) 现像(1)透明(11)vista(1)效果(56)CSS(655)咱们(25)一样(9)来看(4)附图(1)
咱们来看一个在ie里面的完全的透明款式定义: background-image: none; 下面是用这种方式实现的透明效果的多少个截图: * html . Transparent { 假如你对图片保存格局有些懂得的话,你会发明gif图片是可以保存局部透明效果的,在网页中直接应用gif图片的话,能够部门透明,但效果并不完善,比方图片边沿不整洁, 用CSS定义表格边框的方法 ,不能半透明等等。实际上,还有一种网页中很常用的.png格式的图片可以很完美的保留图片的透明效果。在ps中设计出来的各种透明半透明效果
用CSS实现像vista一样很酷的透明效果(附图)》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344262013.htm

咱们来看一个在ie里面的完全的透明款式定义:

     background-image: none;

下面是用这种方式实现的透明效果的多少个截图:

* html . Transparent {

    假如你对图片保存格局有些懂得的话,你会发明gif图片是可以保存局部透明效果的,在网页中直接应用gif图片的话,能够部门透明,但效果并不完善,比方图片边沿不整洁,用CSS定义表格边框的方法,不能半透明等等。实际上,还有一种网页中很常用的.png格式的图片可以很完美的保留图片的透明效果。在ps中设计出来的各种透明半透明效果,只有你准确的将它保存为.png格式的话,图片翻开的效果简直和在ps中是一样的,边缘很润滑,透明度也都一致。我们今天这里不重点讨论怎么制造带有透明效果的.png格式图片,我们来探讨怎么让它在网页中完美的显示出它的透明的魅力。

background: transparent url(images/transparent.png) no-repeat;
 

 

     background: transparent url(images/transparent.png) no-repeat;       

首先,你要把样式的背景色彩和背景图片都设置为不。而后用滤镜导入一个.png图片,准则上就ok了,实在也很简略。

 视频播放和视频收藏 Tag:VISTA   透明效果   VISTA   透明效果  

 

 

     background-image: none;

}

 

 

 精灵空间

     height: 42px,用CSS和jQuery制作霓虹效果;

--> [网站建设之]用CSS实现像vista一样很酷的透明后果(附图)

首页

 背景音乐和网页收藏  图片阅读跟图片珍藏

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="test.png", sizingMethod="crop");

background-color: transparent;

 

     width: 16px;

     我们看,.Transparent这个样式自身就是兼容firefox的。而后面的* html这个符号只有ie可以辨认,熟习样式兼容的朋友肯定常常用到这个写法。那么* html . Transparent在ie里面就将笼罩或者增加样式的属性,实现透明效果,用css制作具有亲和力的表格。有兴致的朋友,不防一试。

 

     background-color: transparent;

}

事实上,firefox是可以直接完美的支持.png图片的透明效果的。不信朋友们现在就可以尝尝,在网页里面插入任何一个带有透明效果的.png图片,用firefox打开,用CSS制作一个圆形放大镜

 ,用CSS创建一个布局居中的页面;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ transparent.png", sizingMethod="crop");

当然我们不能只顾ie里面如何。个别情形下,我们还须要斟酌如何兼容firefox。上面已经说过了,在firefox里面其实是可以直接兼容.png的透明格式的,所以这里更简单:

 

width: 16px;

兴许也有友人尝试过要做出一些透明的效果,也有朋友晓得.png图片可以是有透明效果的,然而怎么一放到网页里面,显示的效果就变味了呢?

 

只惋惜,当初究竟仍是使用ie的同道占多数。偏偏ie里面不能直接出这种效果。但确定是有措施解决的。我们知道ie是支撑滤镜的。也许不少朋友也知道滤镜可以做一些很不错的效果出来,但也许你不是很了解“AlphaImageLoader”这个滤镜。它起的作用就是在html dom元素的背景和内容之间的导入一层图片。如果这个图片是带有透明样式的.png图片,它将完美的保留其透明样式,并且在完整透明的部分,是鼠标可穿透的。

     height: 42px;

 

 

.Transparent {

 

下面综合起来看这个兼容的样式应当怎么写:


(责任编辑:网站建设)
用CSS实现像vista一样很酷的透明效果(附图)相关文章
上一篇:用CSS定义表格边框的方法 下一篇:用CSS实现图片圆角化处理
回到顶部