哈喽!大家好,欢迎来到西瓜社区,今天简单给大家讲下HTML几种常用的图片代码。
图片基础代码
<img src="图片链接地址" width=100>
图片带描述代码
(title=鼠标放到图片显示title里面的内容;width=自定义宽;heighe=自定义高)
<img src="图片链接地址" alt="图片描述" title="图片描述-鼠标放到显示描述" width="100" height="50">
图片加边框
普通黑色边框
<img src="图片链接地址" width=100 border=12>
CSS装饰框
<img src="图片链接地址" width=100 style="border:12px #987cb9 solid">
<img src="图片链接地址" width=100 style="border:12px #987cb9 dashed">
<img src="图片链接地址" width=100 style="border:12px #987cb9 dotted">
<img src="图片链接地址" width=100 style="border:12px #987cb9 double">
<img src="图片链接地址" width=100 style="border:12px #987cb9 groove">
<img src="图片链接地址" width=100 style="border:12px #987cb9 ridge">
<img src="图片链接地址" width=100 style="border:12px #987cb9 inset">
<img src="图片链接地址" width=100 style="border:12px #987cb9 outset">
图片加CSS滤镜
黑白
<img style="FILTER: gray()" src="图片链接地址" width=100>
底片
<img style="FILTER: xray()" src="图片链接地址" width=100>
X光片
<img style="FILTER: invert()" src="图片链接地址" width=100>
水平翻转
<img style="FILTER: fliph()" src="图片链接地址" width=100>
垂直翻转
<img style="FILTER: flipv()" src="图片链接地址" width=100>
透明效果(opacity=100 透明度0—100)
<img style="FILTER: Alpha(opacity=100,style=1)" src="图片链接地址" width=100>
<img style="FILTER: Alpha(opacity=100,style=2)" src="图片链接地址" width=100>
<img style="FILTER: Alpha(opacity=100,style=3)" src="图片链接地址" width=100>
<img style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="图片链接地址" width=100>
浮雕效果
<img style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="图片链接地址" width=100>
波纹效果
(Add=是否打乱1或0;Freq=频率;LightStrength=光效强度;Phase=偏移量;Strength=振幅)
<img style="FILTER:progid:DXImageTransform.Microsoft.Wave()" src="图片链接地址" width=100>
<img style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)" src="图片链接地址" width=100>
模糊效果
(Add=是否模糊1或0;Direction=方向;Strength=强度)
<img style="FILTER:progid:DXImageTransform.Microsoft.Blur()" src="图片链接地址" width=100>
<img style="FILTER:Blur(Add=1,Direction=45,Strength=150)" src="图片链接地址" width=100>
发光效果
(Color=颜色;Strength=强度)
<img style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="图片链接地址" width=100>
<img style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)" src="图片链接地址" width=100>
阴影效果
(Color=颜色;Direction=方向;Strength=强度)
<img style="FILTER:progid:DXImageTransform.Microsoft.Shadow()" src="图片链接地址" width=100>
<img style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=135,Strength=10)" src="图片链接地址" width=100>
投影效果
(Color=颜色;offx=横向位移;offy=纵向位移;Positive=非透明或透明像素建立可见投影1或0)
<img style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()" src="图片链接地址" width=100>
<img style="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=10,Offy=5,Positive=1)" src="图片链接地址" width=100>
镂空效果
<img style="FILTER: Mask()" src="图片链接地址">
图片定位
<img src="图片链接地址" width=100 align=right hspace="5" vspace="5">
图片说明描述
<img src="图片链接地址" width=100 alt="图片描述">
图片修饰样式
单线框
<img src="图片地址" style="border:3 solid #993333">
双线框
<img src=图片地址 style="border:5 double #993333">
凸出框
<img src=图片地址 style="border:25 outset #993333">
凹进框
<img src=图片地址 style="border:25 inset #ff88ff">
邮票框
<table style="border:3 dashed #993333" cellspacing="5" cellpadding="0" bgcolor="#660033"><tr>
<td bgcolor="#660033" width=400 height=250 align=center valign=middle>
<img src=图片地址>
</td></tr></table>
虚线框
<img src=图片地址 style="border:4 dashed #993333">
凹槽框
<img src=图片地址 style="border:25 groove #993333" border="0">
脊状框
<img src=图片地址 style="border:10 ridge #993333" border="0">
立体阴影框
<table width=200 height=200 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#993333,direction:145,strength:15)">
<tr>
<td bgcolor="#ffffff" align=center valign=middle>
<img src=图片地址>
</td>
</tr>
</table>
阴影框
<img src=图片地址 style="filter:shadow(color=#993333)">
横向渐变透明
<img src=图片地址 style="filter=alpha(opacity=100,style=1,finishopacity=0)">
圆形渐变透明
<img src=图片地址 style="filter=alpha(opacity=100,style=2,finishopacity=0)">
X形渐变透明
<img src=图片地址 style="filter=alpha(opacity=100,style=3,finishopacity=0)">
改变某种颜色
<center><img src=图片地址 style="FILTER: Chroma(Color=#13629f)">
黑白效果
<img src=图片地址 style="filter:'gray'">
X光效果(底片)
<img src=图片地址 style="filter:'xray'">
浮雕效果
<img src=图片地址style="filter:progid:DXImageTransform.Microsoft.Emboss()">
上下颠倒
<img src=图片地址 style="filter:flipv">
左右颠倒
<img src=图片地址 style="filter:fliph">
色彩颠倒
<img src=图片地址 style="filter:invert">
粒状阴影
<img src=图片地址 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)">
模糊效果
<img src=图片地址 style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)">
水波效果(风吹)
<img src=图片地址 style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)">
© 版权声明
THE END
暂无评论内容