|
图片渐显渐隐效果制作博文简介 |
-
本代码制作是透明滤镜filter:chroma和移动代码的结合。 -
需要指出的是透明属性filter:chroma这种透明色滤镜对于某些图片格式不适用的。例如:JPEG格式的图片是一种已经减色和压缩处理的图片,所以要设置其中某种颜色透明十分困难。此外,每张图片只能指定一种透明色,对于已设置另外的色为透明色的BMP、GIF等格式的图片,再设置透明色时,原先透明而不可见的颜色会重新显示出来。 -
让这个透明的图片在背景图片background上面移动起来,移动过后单元格内的背景颜色bgColor=#000000呈现为黑色掩盖总表格的图片背景。 |
HTML代码1 |
HTML基本代码1 <DIV align=center> <TABLE height=高度 cellSpacing=0 cellPadding=0 width=宽度 align=center background=背景图片地址 border=0> <TBODY> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度> <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE></TD> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度> <MARQUEE scrollAmount=2 width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE></TD> </TR> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度> <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE></TD> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度> <MARQUEE scrollAmount=2 width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE> </MARQUEE> </TD> </TR> </TBODY></TABLE> </DIV> |
HTML基本代码1说明 -
1、表格的居中属性 <DIV align=center>...</DIV> -
2、两行两列表格代码(无边框有背景图片,单元格内背景色为黑色) <TABLE height=高度 cellSpacing=0 cellPadding=0 width=宽度 align=center background=背景图片地址 border=0> <TBODY> <TR> <TD bgColor=#000000></TD> <TD bgColor=#000000</TD></TR> <TR> <TD bgColor=#000000></TD> <TD bgColor=#000000></TD></TR> </TBODY></TABLE> background=背景图片地址是我们表达的主图片,在上传的图片的width=宽度和height=高度一定要和表格的宽度和高度相同,背景图片的宽度和高度最好是相同的值,显示全面。并且背景图片的宽度和高度最好是相同的值,呈正方形特效才能显示出来。 bgColor=#000000单元格的背景颜色为黑色,让移动透明图片显示所要表达的背景图片过后呈现黑色来加强效果。 3、滤镜filter:chroma使指定的颜色透明代码: style="FILTER: chroma(color=#ffff00)" bgColor=#000000 样式为滤掉移动代码中图片的这个颜色color=#ffff00,让移动代码中图片为无色透明并在表格里移动,显示所要表达的背景图片,移动过后呈现单元格的背景颜色bgColor=#000000黑色来加强效果。 -
4、图片移动代码: 四个单元格四组代码从四角向中心移动,每个单元格的宽度和高度是总表格所要表达的背景图片的宽度和高度的四分之一。 (1)向下向右移动代码: <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度> <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE> (2)向下向左移动代码: <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度> <MARQUEE scrollAmount=2 width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE> (3)向上向右移动代码: <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度> <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE> (4)向上向左移动代码: <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度> <MARQUEE scrollAmount=2 width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE> 5、移动滤镜透明图片代码: <IMG height=高度 src="bmp格式的图片地址" width=宽度> 移动滤镜透明图片的宽度和高度也是背景图片的四分之一。 |
HTML代码1实例 <DIV align=center> <TABLE height=400 cellSpacing=0 cellPadding=0 width=400 align=center background=http://img839.ph.126.net/mvdHqA9-3bLOMXeuzAsSDQ==/783626335164534577.jpg border=0> <TBODY> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=down width=200 height=200> <MARQUEE scrollAmount=2 direction=right width=200 height=200> <IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200> </MARQUEE></MARQUEE></TD> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=down width=200 height=200> <MARQUEE scrollAmount=2 width=200 height=200> <IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200> </MARQUEE></MARQUEE></TD> </TR> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=up width=200 height=200> <MARQUEE scrollAmount=2 direction=right width=200 height=200> <IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200> </MARQUEE></MARQUEE></TD> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=2 direction=up width=200 height=200> <MARQUEE scrollAmount=2 width=200 height=200> <IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200> </MARQUEE> </MARQUEE> </TD> </TR> </TBODY></TABLE> </DIV> |
实例效果 |
HTML代码2 |
HTML基本代码2 直接在一个单元内移动透明图片的效果,值得注意的是调节好宽度和高度。 <DIV align=center> <TABLE height=宽度 cellSpacing=0 width=宽度 background=背景图片地址 border=0> <TBODY> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=3 direction=down behavior=alternate width=宽度 height=高度> <MARQUEE scrollAmount=3 direction=right behavior=alternate width=宽度 height=高度> <IMG height=高度 src="bmp格式的图片地址" width=宽度> </MARQUEE></MARQUEE> </TD> </TR> </TBODY> </TABLE> </DIV> |
HTML基本代码2说明 -
1、上下移动代码 <MARQUEE scrollAmount=3 direction=down behavior=alternate width=宽度 height=高度></MARQUEE> 上下移动的代码的宽度和高度与背景图片的宽度和高度相同。 -
2、左右移动代码 <MARQUEE scrollAmount=3 direction=right behavior=alternate width=宽度 height=高度></MARQUEE> 左右移动代码的宽度与背景图片的宽度相同,但高度要比背景图片的高度小一些。 -
3、透明图片的高度和宽度 <IMG height=高度 src="bmp格式的图片地址" width=宽度> 透明图片的高度和宽度均小于背景图片的宽度和高度。 |
HTML代码2实例 <DIV align=center> <TABLE height=500 cellSpacing=0 width=750 background=http://img314.ph.126.net/nZpCfmgJMD6ISDDHdnoHkQ==/3888013853304573780.jpg border=0> <TBODY> <TR> <TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000> <MARQUEE scrollAmount=3 direction=down behavior=alternate width=750 height=500> <MARQUEE scrollAmount=3 direction=right behavior=alternate width=750 height=200> <IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=600> </MARQUEE></MARQUEE> </TD> </TR> </TBODY> </TABLE> </DIV> |
实例效果 |
欢 迎 光 临 启 野 博 客 |
评论