打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【图片特效】的代码
------------------------------------------------------------------------
插入图片的代码:
<div><img height=528 src="//userimage2.360doc.com/10/1003/10/3260944_201010031001050936.jpg" width=708 border=0></div>
真实效果
------------------------------------------------------------------------
在任意图片上写字的代码:
1、
<TABLE width=650 cellSpacing=1 cellPadding=1 bgColor=#005F01 border=1>
<TBODY>
<TR>
<TD background=http://image16.360doc.com/DownloadImg/2010/10/2210/6179900_1.jpg >
2、
<TABLE width=500 cellSpacing=1  cellPadding=1 height=375 border=1>
<TBODY>
<TR>
<TD background= http://image16.360doc.com/DownloadImg/2010/10/2210/6179900_2.jpg >
真实效果
------------------------------------------------------------------------
在照片上由下往上移动文字的代码:
<TABLE height=500 width=650  background=http://image16.360doc.com/DownloadImg/2010/10/2210/6179900_4.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=2 direction=up height=200>
<CENTER><FONT style="FONT-SIZE: 32pt" face=华文新魏 color=red><B>加入文字
</B> </FONT></CENTER></MARQUEE></TD></TR></TOBDY></TBODY></TABLE>
<CENTER></CENTER>
direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。真实效果
------------------------------------------------------------------------
在照片旁边写文字的代码:
<P><IMG  src="图片连接地址" height=100 width=100 align=left>文章内容<BR> <BR > clear=left></P>
真实效果
------------------------------------------------------------------------
图片加框的代码:
(1).单边框效果
<center><img src="图片地址" style="border:3 solid #ff0000"></center>
(2).双边框效果
<center><img src="图片地址" style="border:5 double green"></center>
(3).立体镜框(一)效果
<center><img src="图片地址" style="border:25 outset #ff88ff"></center>
(4).立体镜框(二)效果
<center><img src="图片地址" style="border:25 inset #ff88ff"></center>
(5).虚线框
<center> <img src="图片地址" style="border:4 dashed #ff0000"></center>
(6).凹槽框
<center> <img src="图片地址" style="border:25 groove green" border="0"></center>
(7).脊状框
<center> <img src="图片地址" style="border:25 ridge green" border="0"></center>
(8).横向渐变透明
<center><img src="图片地址" style="filter=alpha(opacity=100,style=1,finishopacity=0)">
(9).圆形渐变透明
<center><img src="图片地址" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center>
(10).X形渐变透明
<center><img src="图片地址" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center>
(11).黑白效果
<center><img src="图片地址" style="filter:''gray''"></center>
(12).X光效果(底片)
<center><img src="图片地址" style="filter:''xray''"></center>
(13).浮雕效果
<center><img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>
(14).上下颠倒
<center><img src="图片地址" style="filter:flipv">
(15).左右颠倒效果
<center><img src="图片地址" style="filter:fliph"></center>
(16).色彩颠倒
<center><img src="图片地址" style="filter:invert"></center>
(17).粒状阴影
<center><img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=15)"></center>
(18).模糊效果
<center><img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)"></center>
(19).水波效果
<center><img src="图片地址" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>
(20).图片在水中倒影
<P><IMG src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg" width="240" height="180"><BR><IMG id="reflection" src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="240" height="180"></P>
真实效果
------------------------------------------------------------------------
让图片产生梦幻效果的代码
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 300px; HEIGHT: 420px" height=300 src="图片地址" width=420>
真实效果
------------------------------------------------------------------------
图片倒影代码:
<P><IMG src="图片地址" width="230" height="190"><BR><IMG id="reflection" src="图片地址" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="230" height="190"></P>
真实效果
------------------------------------------------------------------------
图片透明效果代码:
1/<img src="图片网址" style="filter:Alpha(opacity=100,finishOpacity=0,style=3)"> 2/<div style="width:360px;height:270px;filter:Alpha(opacity=100,finishOpacity=0,style=3)">
<img src="图片网址">
</div>
参数说明:涉及到的属性:修改数值对应即可
opacity:开始处的透明度
finishOpacity:结束处的透明度
style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明
真实效果
------------------------------------------------------------------------
图片CSS滤镜---X光效果
代码(1)
<img src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg" style="filter:Xray">
代码(2)
<div style="filter:Xray ;width:宽;height:高"><img src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg"></div>
真实效果
------------------------------------------------------------------------
图片CSS滤镜---发光效果
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="图片网址">
</DIV>
二、参数说明:
color             -->发光颜色
strength        -->发光强度
虑镜宽=图片宽度+发光强度x2
虑镜高=图片高度+发光强度x2+10
真实效果
------------------------------------------------------------------------
图片CSS滤镜---色彩对换效果代码
代码(1)
<img src="图片地址" style="filter:Invert">
代码(2)
<div style="filter:Invert ;width:宽;height:高"><img src="图片地址"></div>
说明:用代码(2)时,必须填图片的宽度和高度。图片的宽度和高度只要在图片上按右键-属性—就可以看到真实效果
------------------------------------------------------------------------
浮雕效果代码
<IMG src="图片地址" style="filter : progid:DXImageTransform.Microsoft.Emboss(Bias=0.7) ;" border=0>
真实效果
------------------------------------------------------------------------
图片反色代码
<IMG src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg" style="FILTER: invert()" border=0>
真实效果
------------------------------------------------------------------------
让图片产生梦幻效果的代码
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 300px; HEIGHT: 420px" height=300 src="//hiphotos.baidu.com/xian25557568/pic/item/c2bfc1cae322d0547e3e6f3a.jpg" width=420>
说明:WIDTH(表宽度,后面的值可以变。)HEIGHT(表高度,后面的值可以变。)绿色的数值也是可是可以改变的,是产生梦幻效果的数值。
真实效果
------------------------------------------------------------------------
图片CSS滤镜---左右旋转效果
代码(1)
<img src="图片网址" style="filter:FlipH">
代码(2)
<div style="width:360px;height:270px;filter:FlipH">
<img src="图片网址"></div>
真实效果
------------------------------------------------------------------------
添加透明flash代码:
<div><embed style="LEFT: 160px; POSITION: absolute; TOP: 260px" align="right" src="你所选的透明flash地址" width="550" height="570" type="application/x-shockwave-flash" wmode="transparent"></embed></div>
真实效果
------------------------------------------------------------------------
图片加背景音乐代码:
<img height=528 src="//userimage2.360doc.com/10/1003/10/3260944_201010031001320577.jpg" width=708 border=0>&nbsp;
<p align=center><embed src=http://www.wuys.com/flash/chan/yscs.swf width=200 height=180 type=application/x-shockwave-flash autostart="true" loop="false"></embed></p>
<div></div>
<bgsound balance=0 src="//szb.nxnet.cn/nxrb/20090226/d99e8177d941be16f1fe9a8b09784275.mp3" volume=0 loop=infinite>
真实效果
------------------------------------------------------------------------
图片滚动的代码:
<marquee scrollAmount=4><img height=150 src="//t1.baidu.com/it/u=2461283506,2413181178&amp;fm=0&amp;gp=0.jpg"> <img height=150 src="//t2.baidu.com/it/u=2567980427,518200139&amp;fm=3&amp;gp=0.jpg"> <img height=150 src="//t2.baidu.com/it/u=907977308,977225030&amp;fm=3&amp;gp=0.jpg"> <img height=150 src="//t2.baidu.com/it/u=3373651659,4143298925&amp;fm=3&amp;gp=0.jpg"></marquee>
scrollamount代表图片移动的速度,值越大移动越快。
direction代表移动的方式,等号后面可以为left(自右向左)、right(自左向右)、up(自下向上)、down(自上向下)。
真实效果
------------------------------------------------------------------------
点击图片进入日志的代码
<P><A href="http://cykctadcl.blog.163.com/blog/static/422929962008612115241562/" target=_blank><IMG height=350 alt=" 点击图片欣赏全文" src="http://image16.360doc.com/DownloadImg/2010/10/2211/6181331_1.jpg" width=200></A>&nbsp;</P>
代码(2)下面的也是缺少日志地址,请朋友们按照上面的方法添加上去!
<P><IMG height=350 hspace=30 src="
http://image16.360doc.com/DownloadImg/2010/10/2211/6181331_1.jpg " width=200 align=left border=0><FONT face=Arial>请点击图片欣赏全文</FONT></P>
真实效果
------------------------------------------------------------------------
图片加边框代码:
&gt;
<div></div>
<table style="BACKGROUND-IMAGE: url(http://image15.360doc.com/DownloadImg/2010/09/2110/5440181_117.jpg); WIDTH: 660px" cellSpacing=45 cellPadding=2 bgColor=#ffffff border=4>
<tbody>
<tr>
<td>
<table style="BACKGROUND-IMAGE: url(http://image15.360doc.com/DownloadImg/2010/09/2110/5439066_31.jpg); WIDTH: 640px" cellSpacing=5 cellPadding=2 bgColor=#ffffff border=4>
<tbody>
<tr>
<td>
<table style="BACKGROUND-IMAGE: url(http://www.23sc.cn/Pic/UploadPic/2009-3/200931311410747.jpg); WIDTH: 620px" cellSpacing=15 cellPadding=2 bgColor=#ffffff border=4>
<tbody>
<tr>
<td>
<div><img height=528 src="//userimage2.360doc.com/10/1003/10/3260944_201010031000440811.jpg" width=708 border=0></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
真实效果
------------------------------------------------------------------------
自由移动变形的图片代码:
<IMG style="WIDTH: 236px; HEIGHT: 304px" height=228 alt=很好玩的 src="//t2.baidu.com/it/u=1469246051,845713463&amp;fm=0&amp;gp=6.jpg" width=236 border=1 name=u>
<SCRIPT language=JavaScript>
var b = 1;
var c = true;
function www_helpor_net(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.width=150 + b;
u.height=125 - b;
setTimeout("www_helpor_net()",50);
}
www_helpor_net();
</SCRIPT>
真实效果
------------------------------------------------------------------------
图片上移动图片的代码:
<TABLE style="WIDTH: 400px; HEIGHT: 500px" cellSpacing=18 borderColorDark=white cellPadding=0 width=450 background=http://image17.360doc.com/DownloadImg/2010/11/0516/6576976_1.gif border=3>
<TBODY>
<TR>
<TD style="WIDTH: 400px; HEIGHT: 500px" background=图片网址>
<CENTER>
<P>
<MARQUEE style="WIDTH: 429px; HEIGHT: 208px" scrollAmount=2 DIRECTIO="down"><INPUT style="FILTER: alpha(opacity=100,style=2); WIDTH: 195px; HEIGHT: 210px" type=image width=100 src="另一个图片网址" size=22></INPUT></MARQUEE></P>
<P><FONT face=华文行楷><B><EM><FONT color=white size=6>文字</FONT></EM></B></FONT></P></CENTER><FONT face=华文行楷 color=white size=5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT></TD></TR></TBODY></TABLE>
<CENTER></CENTER></DIV>
真实效果
------------------------------------------------------------------------
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
图片的边框制作
图片羽化代码 [信纸]
图解HTML代码 - 音画学习区 - 论坛服务区 - 炫音音乐论坛
uc
博客代码大全——图片的边框制作
【转载】图片加上边框的方法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服