S.l.e!ep.¢%

像打了激速一样,以四倍的速度运转,开心的工作
简单、开放、平等的公司文化;尊重个性、自由与个人价值;
posts - 1098, comments - 335, trackbacks - 0, articles - 1
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

DIV+CSS学习之背景颜色渐变

Posted on 2009-09-10 22:29 S.l.e!ep.¢% 阅读(1814) 评论(0)  编辑 收藏 引用 所属分类: HTML
2008-01-14 16:55


方法一:剪裁好1px宽带有渐变的背景图片,在css文件中添加{background:url() repeat-x}这样背景图片只会在横向repeat

方法二:<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
缺点是:背景渐变的大小会随着网页大小的变化而变化

还有网页图片的颜色渐变:
<img src="xxxxxx.jpg" width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">

=======================

for example:

<style>td{text-align:center;color:white;font-family:宋体;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;width:567;height:234;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF00000,endcolorstr=#FFFFFF00,gradientType=0);}\
body{filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF00119d,endcolorstr=#FF000000,gradientType=1);}</style>


<center>
<table border="0" cellspacing="20" cellpadding="2">
<tr><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF00000,endcolorstr=#FFFFFF00,gradientType=1)">
网页陶吧
</td><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF00119f,endcolorstr=#FF09FFFF,gradientType=1)">
网页陶吧提供单位或个人建站的全套服务,包括建站指南(建站流程,网站模式,网站类型,主机和域名等)、网站制作(网页工具、标记语言、网页特效等)、网站推广(网页优化,W3C标准,搜索引擎研究、网站推广方式等)以及网络新技术和新模式(web2.0,<a href="http://www.knowsky.com/article.asp?typeid=119">Ajax</a>,垂直搜索引擎等)
</td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFFee00,endcolorstr=#FF09FF00,gradientType=1)">
龙犊
</td><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=deeppink,endcolorstr=#FF09FF00,gradientType=1)">
<B><font color="#22FF22">网</font><font color="#FF2222">页</font><font color="#001199">陶</font><font color="#00fffa">吧</font></B>
</td></tr>
</table>

<s cript language="<a href="http://www.knowsky.com/article.asp?typeid=36">javas cript</a>">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</s cript>
<nos cript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=nos criptcounter&cur=nos criptcounter" border='0' width='0' height='0'/>
</nos cript>



只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理