荷尔蒙百度云:博客图片处理

来源:百度文库 编辑:中财网 时间:2024/05/01 04:47:05
一、图片水中倒影:

    首先还是将这个图片水中倒影的代码奉献给大家:

图片地址" width="240" height="180">
图片地址" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="240" height="180">>  

二、小图放大代码:

    下面,我继续给大家将一个大家在许多网站上面经常见到的图片样式,就是在打开网站的时候,有一个小图片,同时在它的下面有一个注释就是:点击放大。那么他是如何实现的呢?也是用代码做成的,它的代码是:

小图放大代码:
大图片地址" target="_blank">还是大图片地址" width="180" height="120">点击放大

三、CSS图片滤镜效果

大家还是先来看看我的下面两张对比的相片效果:

    看出来了吧!我的这两张照片是不是不同,后者变模糊了,而且显得有点透明了,呵呵...其实很简单,这就是我要为大家讲的滤镜代码,它只是对图片加了一个滤镜效果而已,代码就是:

 

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

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

    顺便在这里给大家说一下对图片加链接的代码,因为很多刚做博客的朋友都不知道,大家可以试一试点击一下下面的我的照片,看看有什么现象出现:

    是不是会弹出一个新的窗口,显示我的博客页面呢?呵呵,这就是为图片加链接的效果,他的代码是:

    链接地址" target=_blank>图片地址" width=100 height=100 border=0>

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

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

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

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

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

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

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

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

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

(style=2表示模糊类型,1表示从左往右渐变模糊,2如图效果,3表示四周渐变模糊) 四、融入背景的图片融入背景的图片,大家可以任意做成自己喜欢的照片,图片都可以,当然也可以放在自己的博客日志里面,只要切换到代码视图就可以粘贴了。

    这段代码是:

   

图片地址" style="FILTER: Alpha(Opacity=80,style=2)" border="0" />

 

    把蓝色部分换成你喜欢的图片地址.这个是两个代码,用了滤镜和绝对定位的代码。

    RIGHT: 5px      TOP: 220px 根据需要自己调节放到自己喜欢的位置。

    在给大家提供一个特别的代码,大家可以给自己的博客文章添加一个漂亮的标题横幅图片,代码如下:


图片地址  border=0>

文章标题

    上面所说的融入背景得图片,我们也可以放在自己的日志当中,方法就是在写自己的博客日志的时候,首先将页面切换到代码视图,将自己的代码复制粘贴之后,在转换到文字编辑的视图页面就可以了!大家可以试一试!

   大家可以用下面给大家提供的图片替换“图片地址”,你可以先看看(目前这个还是有一点问题,我正在寻找解决的方法)!

标题图片地址:
http://blog.sina.com.cn/pic/470e283e8f813f7b94db7
http://blog.sina.com.cn/pic/470e283e032528e04491e
http://blog.sina.com.cn/pic/470e283edb81f71af8752
http://blog.sina.com.cn/pic/470e283ea9a1dd613a0e2
http://blog.sina.com.cn/pic/470e283e907ccfe6bc33c
http://blog.sina.com.cn/pic/470e283e490c1ca958408