您当前的位置:站才网 -> 站长文章 -> 网页制作 -> Web设计 -> 正文
站内搜索:

利用CSS滤镜效果来替代图象的渐变

[时间:2007/05/30| 收藏 投稿 ]【
自己写的,写完才想到去网上看看有没有,好象有,但没介绍非IE下如何解决。
在网页设计过程中,我们常常会用 渐变的图片做背景来美化界面,

一般我不这样做,理由很简单,因为我个人比较喜欢清爽简洁的界面,绝对不能容忍网页在加载时有过多的包袱而影响速度。

对这个问题,在需要的时候,我一般会用 CSS的滤镜去达到相同的效果。

优点:加载速度相对图象要快,提高用户体验

缺点:IE特有的效果,别的浏览器不支持。
效果图

由于非IE用户看不到效果,所以我用CSS控制在其他浏览器下用背景色代替,当然,你也可以用背景图象达到相同的效果。

方法: 用!important ,考虑更多浏览器,再周全点,我们可以用voice-family 来增加在其他浏览器下的显示,因为IE是不解释这条语句的。

效果图  IE和firefox下演示:

下面这个图是firefox下演示。
给个我写的简单演示代码吧~!复制就能用

<style>
.a{position:absolute; width:300px; height:200px; border:1px solid #C96BE0; left:100px;}
h2{font-size:14px;margin:0; padding:0;}
.b{height:20px!important; height:23px; FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorstr='#E4ABEF', endColorstr='#FAEFFC');
background-color:#F3D8F8!important; padding:3px 0px 0px 5px;}
</style>
<h1>利用CSS滤镜构造图片渐变效果</h1>

<div class=a>
<h2 class=b>对于IE,能够有理想的渐变效果</h2>
</div>


本篇来自:站才网 (http://www.zhancai.com),更多请参考以上网站.
682
持不同观点的网友请评论留言
发表评论
评论内容:不能少于5个字,请自觉遵守互联网相关政策法规。
用户名: 分值:
验证码: 验证码,看不清楚?请点击刷新验证码
快速注册
站才网·中国站长人才教学基地
站长工具包
关于我们 | 广告服务 | 网站申明 | 联系我们 | 网站地图 | 友情连接 | 建议留言
版权所有:站才网 未经授权禁止复制或建立镜像 转载本站原创资料请注名来源于本站
站才网力倡站长文化,崇尚互联共享.
© CopyRight 2006-2008, zhancai.com, Inc. All Rights Reserved.
站长人才基地,做站素材整理,做中国优秀站长人才培育网站,为中国网站提供动力!