轻轻老师代码课用素材(2014.7.15)
船儿代码素材
1、无形边框及大图背景代码
<table width=400 height=400 align="center"><TBODY><TR><TD></TD></TR></TBODY></table>
style="BACKGROUND-IMAGE:url(背景图片地址)"
效果一图片地址:
效果二图片地址:
2、矩阵
style="FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='auto expand')"
3、羽化代码
style="filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, FinishX=0, StartY=0, FinishY=100);"
4、背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值:
a:repeat 导致图像在水平垂直方向上都平铺。
b:repeat-x 图像只在水平方向上重复。
c:repeat-y 图像只在垂直方向上重复。
d:no-repeat 则不允许图像在任何方向上平铺。
e: 默认背景图像将从一个元素的左上角开始
5、背景定位
可以利用 background-position 属性改变图像在背景中的位置。
background-position 属性值
首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,
不过也不总是这样。
其次还可以使用长度值,图像的左上角与 background-position 声明中的指定的点对齐
最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
6、颜色渐变滤镜代码
style="filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#003f34 ,endcolorstr=#7fadaa,gradientType=1);"
效果一代码:
<table width="400" align="center" height="600"><TBODY>
<TR><TD height="150" width="400" align="middle">
<table width="400" align="center" height="150"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b233.photo.store.qq.com/psb?/V13GWPxN0RgQbp/7qdg6CETKG69dZUBmqzLmscFQNyADA.q2NYitNUJdgQ!/b/dMuf6IpVJAAA&bo=FAIgAwAAAAABABI!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0.6,M21=0,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-100px 0px" height="150" width="400" align="middle">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=0,startY=0,finishY=100)" width="400" bgColor="#0" align="center" height="150"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table></TD></TR>
<TR><TD height="150" width="400" align="middle">
<table width="400" align="center" height="150"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b233.photo.store.qq.com/psb?/V13GWPxN0RgQbp/7qdg6CETKG69dZUBmqzLmscFQNyADA.q2NYitNUJdgQ!/b/dMuf6IpVJAAA&bo=FAIgAwAAAAABABI!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=-0.6,M21=0,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-100px -150px" height="150" width="400" align="middle">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=0,startY=0,finishY=100)" width="400" bgColor="#0" align="center" height="150"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table></TD></TR>
<TR><TD height="150" width="400" align="middle">
<table width="400" align="center" height="150"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b233.photo.store.qq.com/psb?/V13GWPxN0RgQbp/7qdg6CETKG69dZUBmqzLmscFQNyADA.q2NYitNUJdgQ!/b/dMuf6IpVJAAA&bo=FAIgAwAAAAABABI!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0.6,M21=0,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-100px -300px" height="150" width="400" align="middle">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=0,startY=0,finishY=100)" width="400" bgColor="#0" align="center" height="150"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table></TD></TR>
<TR><TD height="150" width="400" align="middle">
<table width="400" align="center" height="150"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b233.photo.store.qq.com/psb?/V13GWPxN0RgQbp/7qdg6CETKG69dZUBmqzLmscFQNyADA.q2NYitNUJdgQ!/b/dMuf6IpVJAAA&bo=FAIgAwAAAAABABI!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=-0.6,M21=0,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-100px -450px" height="150" width="400" align="middle">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=0,startY=0,finishY=100)" width="400" bgColor="#0" align="center" height="150"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table></TD></TR>
</TBODY></table>
效果二代码:
<table width="800" align="center" height="500"><TBODY><TR>
<TD height="500" width="200" align="middle">
<table width="200" align="center" height="500"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b228.photo.store.qq.com/psb?/V13GWPxN04ADKP/Tuafz8jDutO0yPIQY1gSkUzW*EqLAKwyg7wokVxzqoo!/b/dKJQ9YeyBQAA&bo=IAMVAgAAAAABABM!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0.6,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:0px 0px">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=100,startY=0,finishY=0)" width="200" bgColor="#000000" align="center" height="500"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table>
</TD>
<TD height="500" width="200" align="middle">
<table width="200" align="center" height="500"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b228.photo.store.qq.com/psb?/V13GWPxN04ADKP/Tuafz8jDutO0yPIQY1gSkUzW*EqLAKwyg7wokVxzqoo!/b/dKJQ9YeyBQAA&bo=IAMVAgAAAAABABM!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=-0.6,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-200px 0px">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=100,startY=0,finishY=0)" width="200" bgColor="#000000" align="center" height="500"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table>
</TD>
<TD height="500" width="200" align="middle">
<table width="200" align="center" height="500"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b228.photo.store.qq.com/psb?/V13GWPxN04ADKP/Tuafz8jDutO0yPIQY1gSkUzW*EqLAKwyg7wokVxzqoo!/b/dKJQ9YeyBQAA&bo=IAMVAgAAAAABABM!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0.6,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-400px 0px">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=100,startY=0,finishY=0)" width="200" bgColor="#000000" align="center" height="500"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table>
</TD>
<TD height="500" width="200" align="middle">
<table width="200" align="center" height="500"><TBODY><TR><TD style="BACKGROUND-IMAGE:url(http://b228.photo.store.qq.com/psb?/V13GWPxN04ADKP/Tuafz8jDutO0yPIQY1gSkUzW*EqLAKwyg7wokVxzqoo!/b/dKJQ9YeyBQAA&bo=IAMVAgAAAAABABM!&rf=photoDetail);FILTER:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=-0.6,M22=1,SizingMethod='auto expand');BACKGROUND-POSITION:-600px 0px">
<table style="FILTER:alpha(Opacity=10,finishOpacity=20,style=1,startX=0,finishX=100,startY=0,finishY=0)" width="200" bgColor="#000000" align="center" height="500"><TBODY><TR><TD></TD></TR></TBODY></table>
</TD></TR></TBODY></table>
</TD>
</TR></TBODY></table>
<table width="800" align="center" height="160">
<TBODY><TR><TD></TD></TR></TBODY></table>
文章评论
富平安康
老师辛苦了,祝夏安![em]e156[/em] [em]e156[/em]