轻轻老师代码课用素材(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]