晨风资讯网
新闻资讯网络冲浪网页设计网络编程图形图像数据库网络媒体服务器网络安全网站运营软件教程黑客认证Wap技术
教程搜索
教程搜索:
  首页 > 网页设计 > HTML/CSS > 正文  

〖html代码〗图片
日期:2006-3-18 10:56:41 来源: 作者: 浏览:

    关键词:图片加边框黑白图片底片X光片图片水平翻转图片垂直翻转图片透明效果浮雕、波纹、模糊、发光、阴影、投影、镂空、添加图片说明

一、基础代码
<IMG src="图片链接地址" width=200>

 

二、加边框
1、普通黑色边框(浏览器默认黑色)
<img src="图片链接地址" width=200 border=12>

2、简单的CSS装饰框
①<img src="图片链接地址" width=200 style="border:12px #987cb9 solid">
②<img src="图片链接地址" width=200 style="border:12px #987cb9 dashed">
③<img src="图片链接地址" width=200 style="border:12px #987cb9 dotted">
④<img src="图片链接地址" width=200 style="border:12px #987cb9 double">
⑤<img src="图片链接地址" width=200 style="border:12px #987cb9 groove">
⑥<img src="图片链接地址" width=200 style="border:12px #987cb9 ridge">
⑦<img src="图片链接地址" width=200 style="border:12px #987cb9 inset">
⑧<img src="图片链接地址" width=200 style="border:12px #987cb9 outset">

① ② ③ ④ ⑤ ⑥ ⑦ 

 

三、加CSS滤镜
1、无参数滤镜
①黑白
<IMG style="FILTER: gray()" src="图片链接地址" width=200>
②底片
<IMG style="FILTER: xray()" src="图片链接地址" width=200>
③X光片
<IMG style="FILTER: invert()" src="图片链接地址" width=200>
④水平翻转
<IMG style="FILTER: fliph()" src="图片链接地址" width=200>
⑤垂直翻转
<IMG style="FILTER: flipv()" src="图片链接地址" width=200>

① ② ③ ④ 

2、透明效果(opacity=100 透明度0—100)
①<IMG style="FILTER: Alpha(opacity=100,style=1)" src="图片链接地址" width=200>
②<IMG style="FILTER: Alpha(opacity=100,style=2)" src="图片链接地址" width=200>
③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="图片链接地址" width=200>
④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="图片链接地址" width=200>

① ② ③ 

3、其他特效
①浮雕
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="图片链接地址" width=200>

②波纹
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Wave()" src="图片链接地址" width=200>
<IMG style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)" src="图片链接地址" width=200>
(Add=是否打乱1或0;Freq=频率;LightStrength=光效强度;Phase=偏移量;Strength=振幅)

 

③模糊
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Blur()" src="图片链接地址" width=200>
<IMG style="FILTER:Blur(Add=1,Direction=45,Strength=150)" src="图片链接地址" width=200>
(Add=是否模糊1或0;Direction=方向;Strength=强度)

 

④发光
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="图片链接地址" width=200>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)" src="图片链接地址" width=200>
(Color=颜色;Strength=强度)

 

⑤阴影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow()" src="图片链接地址" width=200>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=135,Strength=10)" src="图片链接地址" width=200>
(Color=颜色;Direction=方向;Strength=强度)

 

⑥投影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()" src="图片链接地址" width=200>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=10,Offy=5,Positive=1)" src="图片链接地址" width=200>
(Color=颜色;offx=横向位移;offy=纵向位移;Positive=非透明或透明像素建立可见投影1或0)

 

⑦镂空
<IMG style="FILTER: Mask()" src="图片链接地址">

 原图   对照图

 

四、图片定位(align=right图片居右 hspace水平间距 vspace垂直间距)
<img src="图片链接地址" width=200 align=right hspace="5" vspace="5">

 

五、添加图片说明
<img src="图片链接地址" width=200 alt="原来你也在这里">

原来你也在这里

本教程共2页,当前在第1页  1  2  


上一篇: 没有了 下一篇:

在 CSS 中关于字体处理效果的思考

返回列表 打印此页 加入收藏 资讯论坛 关闭窗口 点击复制本页地址,发送给QQ/MSN好友
关于我们 - 联系我们 - 版权声明 - 帮助(?) - 广告服务 - 友情链接 - 服务项目 - 人才招聘
2003-2008 版权所有 © 晨风资讯网 未经授权禁止复制或建立镜像
CopyRight 2003-2008 www.Net118.com,All Rights Reserved.Design By ChenFeng Network Studio