当前位置:首页 > 网站制作教程 > 正文

HTML图片代码

目录导航
  • 图片基础代码
  • 图片带描述代码
  • 图片加边框
  • 图片加CSS滤镜
  • 图片定位
  • 图片说明描述
  • 图片修饰样式
  •   哈喽!大家好,欢迎来到牛牛博客,今天简单给大家讲下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图片代码 第1张

    发表评论

    推荐文章

    最新文章

    取消
    扫码支持 支付码