filter css 滤镜详细解读二 | 胡鹏博客
首页 > CSS样式 > filter css 滤镜详细解读二
2012四月16

filter css 滤镜详细解读二

由于上一篇没有足够的版面来写啦,故而分成了两篇,代码如下





Alpha:

原始图片 开始透明度(opacity):100
结束透明度(finishopacity):0
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)
开始透明度(opacity):70
结束透明度(finishopacity):20
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)

Blur:

原始图片 显示原来的图片,且以270度的方向模糊20px 不显示原来的图片,且以90度方向模糊20px

Chroma

原始图片 Chroma指定的字体颜色(我是CCHXP)变为透明

DropShadow

原始图片 设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。 设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。

FlipH&FlipV

原始图片 设置图片水平翻转FlipH 设置图片垂直翻转FlipV

Glow

原始图片 设置图片光晕颜色为黄色,强度为10 设置图片光晕颜色为红色,强度为20

Gray

原始图片 将图片的颜色去除,以达到灰色效果

Invert

原始图片 设置图片颜色呈底片效果

Mask

原始图片 设置图片的屏蔽颜色为蓝色

Shadow

原始图片 设置图片阴影颜色为绿色,往225度方向 设置图片阴影颜色为红色,往135度方向

Wave

原始图片 不显示原始图片,有5个振幅为20象素的波浪,其光的强度为30,波浪其始位置为50 显示原始图片,有3个振幅为50象素的波浪,其光的强度为50,波浪起始位置为100

Xray

原始图片 X光照片的效果

Gray&Invert&Xray比较

原始图片 Gray效果 Invert效果 Xray效果



想看

更多

文章作者:东莞seo
本文链接地址:http://www.seostudying.com/738.html
欢迎转载,转载请注明出处»胡鹏博客 [filter css 滤镜详细解读二]

本文目前尚无任何评论.
您必须在 登录 后才能发布评论.