loading ...
loading...

2006-05-07 | CSS图片滤镜效果

分享

本文来自新浪蚊子的博客http://blog.sina.com.cn/m/wenzi

看到这张图片与我的头像那里的那张有什么不同没,是不是变模糊,显得有点透明了,呵呵...其实很简单,只是对图片加了一个滤镜效果而已,代码就是:

<IMG src="图片地址" style="FILTER: alpha(opacity=40)" border=0>

就这么简单,其中opacity=40是表示图片的透明度,值越小越透明;border=0表示图片外框线条的粗细,数值越大边框线条越粗,数值设为0表示边框隐藏。

顺便在这里给大家说一下对图片加链接的代码,因为很多刚做博客的朋友都不知道:

<A href="链接地址" target=_blank><img src="图片地址" width=100 height=100 border=0></A>

其中target=_blank表示链接在新窗口中打开,图片的宽width和高height的具体数值可以根据自己的实际需要进行设定!

还有很多其他的效果,这里顺便再给大家讲一下,这些滤镜效果还可以用在对播放器的美化上

1、反色
<IMG src="图片地址" style="FILTER: invert()" border=0>

2、浮雕效果
<IMG src="图片地址" style="filter : progid:DXImageTransform.Microsoft.Emboss(Bias=0.7) ;" border=0>

3、扭曲效果
<IMG src="图片地址" style="FILTER: wave(add=0,freq=3,lightstrength=50,phase=0,strength=3)" border=0>

(freq=5表示扭曲尺度,strength=5表示扭曲强度)

4、虚线边框效果
<IMG src="图片地址" style="FILTER: Gray;border-width:2;BORDER-STYLE: dotted;" border=0>

(border-width:2表示边框宽度,数值可改)

7、透明效果
<IMG src="图片地址" style="FILTER: Alpha(Opacity=80,style=2)" border=0>

(style=2表示模糊类型,1表示从左往右渐变模糊,2如图效果,3表示四周渐变模糊) 

分享 分享 |  评论 (125) |  阅读 (?)  |  固定链接 |  类别 (※→代码★大全←※) |  发表于 19:57  | 最后修改于 2006-05-21 19:58
搜狐博客温馨提示:搜狐博客官方不会要求参加活动的各位博友缴纳任何的手续费用。请勿轻信留言、评论中的中奖信息,更不要拨打陌生电话及向陌生帐户汇款,谨防受骗!识别更多网络骗术,请 点击查看详情
正在读取评论信息...
您还未登录,只能匿名发表评论。或者您可以 登录 后发表。
 
  *中国人爱国心,搜狗输入法爱国主题皮肤下载>>
表  情:
加载中...
回复通知: 同时用小纸条通知对方该回复