HTML图片代码合集 图片的几种常用代码

哈喽！大家好，欢迎来到西瓜社区，今天简单给大家讲下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)">