happy-yan 发表于 2006-7-5 14:35:41

[07/05][交流]CSS滤镜运用——CHROMA(指定色透明)滤镜

<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=2><BR><BR>
<font size=4 color=purple><b>
  Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:<BR><BR>
  
  Filter:Chroma(color=color)<BR><BR>

  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。<BR><BR>
  另外,需要注意的是,chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式),所以它们很少有固定的位置可以设置为透明。<BR><BR></b></font></td></tr>

<tr><td colspan=2><BR><BR><BR><font size=4 color=purple><b>看看两个不同的效果吧:</b></font></td></tr>
<tr><TD width=50%><center><font size=3>原图</center><td width=50%><center><font size=3>效果及代码</center></td></tr>

<tr><TD width=50%><center>
<img src=http://www.blueidea.com/articleimg/2006/03/3255/05.jpg width=350></center></td>
<td width=50%><center>
<img src=http://www.blueidea.com/articleimg/2006/03/3255/05.jpg width=350 style="filter:chroma(color=white)">
<BR><BR><textarea rows=6 cols=54>
<img src=http://www.blueidea.com/articleimg/2006/03/3255/05.jpg width=350 style="filter:chroma(color=white)"></textarea></center></td></tr>
<tr><td colspan=2><BR><BR><BR><font size=4 color=purple><b>举一反三,用于制作文字效果,将要文字颜色设置为指定的透明色,如下图:(以前月儿发过这个教程贴,<a href=http://bbs.xyhc.com/viewthread.php?tid=673412&extra=page%3D1>点击此处</a>转到闪烁字教程)</b></font></td></tr>
<tr><TD width=50%><center><font size=3>效果图</center><td width=50%><center><font size=3>代码</center></td></tr>

<tr><TD width=50%><center>
<table border=1 cellspacing=5 cellpadding=5 background=http://nxm.16789.net/s-helpSite/domName/nxm/2004121216312377020.gif width=100%><td width=100% background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/06de6b57.gif style="filter:chroma(color=blue)"><center><font style="font-size:40PT;font-family:隶书;font-style:bold;color=blue">欢迎光临音画学堂</font></td></table>
</td>
<td width=50%><center>
<textarea rows=10 cols=54>
<table border=1 cellspacing=5 cellpadding=5 background=http://nxm.16789.net/s-helpSite/domName/nxm/2004121216312377020.gif width=100%><td width=100% background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/06de6b57.gif style="filter:chroma(color=blue)"><center><font style="font-size:40PT;font-family:隶书;font-style:bold;color=blue">欢迎光临音画学堂</font></td></table>
</textarea></center></td></tr>
</table>

月儿 发表于 2006-7-5 19:32:38

這 個 好 啊 .. <BR>
thx happy… ^^

Kim_Kim 发表于 2006-7-5 20:32:10

<table border=1 cellspacing=5 cellpadding=5 background=http://nxm.16789.net/s-helpSite/domName/nxm/2004121216312377020.gif width=100%><td width=100% background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/06de6b57.gif style="filter:chroma(color=Pink)"><center><font style="font-size:40PT;font-family:隶书;font-style:bold;color=pink">这个好象代码太长了,要记住还真不容易啊</font></td></table>

[ 本帖最后由 happy-yan 于 2006-7-5 21:18 编辑 ]

Kim_Kim 发表于 2006-7-5 20:33:12

为什么我的字没有闪光呢?月儿MM,HAPPY来解释下吧

happy-yan 发表于 2006-7-5 21:19:17

记住字体颜色和设置的透明色要一致说^^

绯舞 发表于 2006-7-5 21:24:47

这个真不错哦

Kim_Kim 发表于 2006-7-5 23:24:39

哦,明白了~~

1117 发表于 2006-7-6 14:48:57

有空好好研究一下
页: [1]
查看完整版本: [07/05][交流]CSS滤镜运用——CHROMA(指定色透明)滤镜