HTML图片代码合集 图片的几种常用代码 - 小白博客网

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

作者: 管理员

全网最全的网络资源分享网站

手机扫码查看

标签:

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)">
分享到:
打赏
未经允许不得转载:

作者: 管理员, 转载或复制请以 超链接形式 并注明出处 小白博客网
原文地址: 《HTML图片代码合集 图片的几种常用代码》 发布于2021-12-30

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

验证码

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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏