注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML文字代码——透明文字(滤镜filter:chroma)  

2011-03-18 23:19:21|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

透明文字(滤镜filter:chroma)

 

透明文字(滤镜filter:chroma)博文简介

 

 

  • 透明文字特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:chroma(使指定的颜色透明)。
  • 在发光文字(滤镜filter: glow)、投射阴影文字(滤镜filter: Shadow)、阴影文字(滤镜filter:dropshadow)中一个字运用了两种颜色。字体的颜色设置除了上述三种滤镜之外不能设置一个字两种颜色值,我们运用透明滤镜把原本属于文字的颜色透明掉,文字就看不见了,那么我们只有运用背景图片或背景颜色色彩进行衬托文字,或就像制作HTML表格的边框一样,多层图片嵌套。
  • 滤镜filter:chroma透明属性
    filter:chroma(color=#ff0000)
  • 相关更多滤镜属性点击链接参照:滤镜filter 属性

 

读者

 

1、HTML基本代码::

 
  
  • 代码一:
    <P align=center>
    <TABLE cellSpacing=0 cellPadding=0 align=center background=背景图片地址1>
    <TBODY>
    <TR>
    <TD style="FILTER: chroma(color=#336699)">
    <TABLE cellSpacing=0 cellPadding=0 align=center background=背景图片地址2>
    <TBODY>
    <TR>
    <TD align=middle>
    <FONT style="FONT-SIZE: 86pt" face=华文行楷 color=#336699><B><EM>文本编辑</EM></B></FONT></TD></TR></TBODY></TABLE>
    </TD></TR></TBODY></TABLE>
    </P>
  • 代码二:
    <P align=center>
    <TABLE cellSpacing=0 cellPadding=0 align=center Bgcolor=背景颜色1>
    <TBODY>
    <TR>
    <TD style="FILTER: chroma(color=#336699)">
    <TABLE cellSpacing=0 cellPadding=0 align=center Bgcolor=背景颜色2>
    <TBODY>
    <TR>
    <TD align=middle>
    <FONT style="FONT-SIZE: 86pt" face=华文行楷 color=#336699><B><EM>文本编辑</EM></B></FONT></TD></TR></TBODY></TABLE>
    </TD></TR></TBODY></TABLE>
    </P>

 

2、代码说明:

  

  • 居中属性:<P align=center>...</P>
  • 字体设置:<FONT style="FONT-SIZE: 86pt" face=华文行楷 color=#336699><B><EM>文本编辑</EM></B></FONT>
  • 透明滤镜:FILTER: chroma(color=#336699)颜色值与color=#336699字体的颜色值相同,他们的颜色值只是借用一下。
  • 背景设置:
    单元格间距属性cellspacing=0
    单元格边距属性cellpadding=0
    背景颜色属性 Bgcolor=背景颜色
    背景图像属性 Background=图片地址
    背景颜色或图片地址1 是文字的图形,是文字内部结构,不填加时透明的。
    背景颜色或图片地址2 是文字衬托背景图形,是文字外部结构。
  • 内部表格:
    <TABLE cellSpacing=0 cellPadding=0 align=center background=背景图片地址2>
    <TBODY>
    <TR>
    <TD align=middle>
    <FONT style="FONT-SIZE: 86pt" face=华文行楷 color=#336699><B><EM>文本编辑</EM></B></FONT></TD></TR></TBODY></TABLE>
  • 外部表格:
    <TABLE cellSpacing=0 cellPadding=0 align=center background=背景图片地址1>
    <TBODY>
    <TR>
    <TD style="FILTER: chroma(color=#336699)">...</TD></TR></TBODY></TABLE>
  • 内部表格嵌套在外部表格的<TD>标记内。外部表格滤掉内部表格文字的颜色,显示外部表格的背景颜色或背景图片色彩。

 

3、设置示例:

代码演示示例一

 

代码:

 

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img615.ph.126.net/7Rjx4Li5M24KrIOQrQ0l9Q==/1673087261569495063.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img844.ph.126.net/TltAReeZw0gTD74d0rxyRA==/892838626126396767.gif>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

说明:

静态背景图片1和静态背景图片2都出现,文字显示静态背景图片1的色彩。

 

代码演示示例二

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://0.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img844.ph.126.net/TltAReeZw0gTD74d0rxyRA==/892838626126396767.gif>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

说明:

静态背景图片1的地址设为background=http://0.gif,让静态背景图片1的色彩不能够显示,这样静态背景图片2衬托文字显示透明。

备注:

只能设置静态背景图片1的地址设为background=http://0.gif,绝对不能够删除静态背景图片1的地址,也不能够将静态背景图片2的地址设为background=http://0.gif。

 

 

代码演示示例三

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img32.bimg.126.net/photo/H8VBpwgE_owArPb3zuUoNw==/866942928269561805.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img31.bimg.126.net/photo/VBqZ3k-0HfsjIOoo519RrA==/5373075830430756860.jpg>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

演示:

欢迎光临启野博客

 

说明:

动态背景图片1和动态背景图片2都出现,文字显示动态背景图片1的色彩。

 

代码演示示例四

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://0.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img31.bimg.126.net/photo/VBqZ3k-0HfsjIOoo519RrA==/5373075830430756860.jpg>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

说明:

动态背景图片1的地址设为background=http://0.gif,让动态背景图片1的色彩不能够显示,这样静态背景图片2衬托文字显示透明。

备注:

只能设置动态背景图片1的地址设为background=http://0.gif,绝对不能够删除动态背景图片1的地址,也不能够将动态背景图片2的地址设为background=http://0.gif。

 

代码演示示例五

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img32.bimg.126.net/photo/H8VBpwgE_owArPb3zuUoNw==/866942928269561805.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img624.ph.126.net/9xKhFleHh70NAYuQ6636Vg==/1716434407983354103.jpg>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

演示:

欢迎光临启野博客

 

说明:


动态背景图片1和静态背景图片2都出现,文字显示动态背景图片1的色彩。

 

代码演示示例六

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img843.ph.126.net/VEYtJ9CCvRU5cuNKkVqjyA==/888897976452366315.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img31.bimg.126.net/photo/VBqZ3k-0HfsjIOoo519RrA==/5373075830430756860.jpg>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

演示:

欢迎光临启野博客

 

说明:

静态背景图片1和动态背景图片2都出现,文字显示静态背景图片1的色彩。

 

代码演示示例七

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#cc99ff>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#83072d>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

 

说明:
背景颜色1和背景颜色2都出现,文字显示背景颜色1的色彩。本组代码没实在意义,白费功夫,但对于下面的几组代码具有承前启后的作用。

 

代码演示示例八

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#000000>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#83072d>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

说明:

背景颜色1的设为bgColor=#000000,让背景颜色1的颜色为无色,这样背景颜色2衬托文字显示透明。
备注:只能设置背景颜色1的设为bgColor=#000000,绝对不能够删除背景颜色1,也不能够将背景颜色2设为bgColor=#000000。

 

代码演示示例九

 

代码:

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img844.ph.126.net/TltAReeZw0gTD74d0rxyRA==/892838626126396767.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#83072d>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

 

演示:

欢迎光临启野博客

 

说明:

静态背景图片1和背景颜色2都出现,文字显示静态背景图片1的色彩。

 

代码演示示例十

 

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img14.bimg.126.net/photo/Pev0JHms3ER_0l1s6Pu7KQ==/3958382597482838738.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#83072d>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 75pt" face=华文行楷 color=#336699><B><EM>欢迎光临启野博客</EM></B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

演示:

欢迎光临启野博客

 

说明:

动态背景图片1和背景颜色2都出现,文字显示静态背景图片1的色彩。

 

欢迎光临启野博客!
  
  评论这张
 
阅读(2751)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017