注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML滤镜代码——filter 属性  

2011-03-18 23:04:21|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

filter 属性

 

滤镜(filter 属性)博文简介

 

 

Filters
filter 属性允许您向文本和图像添加更多的样式效果。
注释:若需要使用 filter 属性,请始终指定元素的宽度。
注释:除非 background-color 属性被设置为 transparent,否则某些 Filter 属性将无法工作!

本文来自于:w3school 在线教程

 

不同的滤镜Filters

属性

参数

描述

例子

应用详解链接

alpha

opacity

finishopacity

style

startx

starty

finishx

finishy

允许您设置元素的透明度

 
filter:alpha(
opacity=20,  
finishopacity=100,  
style=1,  
startx=0,   
starty=0,  
finishx=140,  
finishy=270)
 

 

渐变文字

图片CSS滤镜效果—透明

图片雾化移动特效代码

Flash圆形雾化移动特效代码

图片CSS滤镜—波形加上半透明合成效果

让图片产生梦幻效果的代码

blur

add

direction

strength

使元素模糊

 
filter:blur(  
add=true,  
direction=90,  
strength=6);
 

 

模糊文字

图片CSS滤镜—图片模糊效果

chroma

color

使指定的颜色透明

 
filter:chroma
(color=#ff0000)

 

透明文字

fliph

none

水平反转元素

filter:fliph;

 

反转文字

图片CSS滤镜—左右旋转效果

 

flipv

none

垂直反转元素

filter:flipv;

 

反转文字

图片CSS滤镜—倒影效果

 

glow

color

strength

使元素发光
 
filter:glow
(color=#ff0000,  
strength=5);

发光文字

图片CSS滤镜—发光效果

粒状阴影框

gray

none

用黑白色来呈现元素

filter:gray;

图片虚线边框并黑白效果

图片CSS滤镜效果—灰度

invert

none

用反转的颜色和亮度值来呈现元素

filter:invert;

图片CSS滤镜—色彩对换效果

mask

color

 

呈现带有指定背景色和透明前景色的元素

 
filter:mask
(color=#ff0000);
 
编辑文字图片内容

shadow

color

direction

呈现带有阴影的元素

 
filter:shadow
(color=#ff0000,  
direction=90);

 

投射阴影文字

图片CSS滤镜—阴影效果

立体阴影框

dropshadow

color

offx

offy

positive

呈现带有阴影的元素

 
filter:dropshadow
(color=#ff0000,  
offx=5,  
offy=5,  
positive=true);
 

 

阴影文字

wave

add

freq

lightstrength

phase

strength

把元素呈现为波浪状

 
filter:wave
(add=true,  
freq=1,  
lightstrength=3,  
phase=0,  
strength=5)
 

 

水波纹文字

图片CSS滤镜—倒影效果

图片CSS滤镜—扭曲效果

图片CSS滤镜—图片动感模糊效果

图片CSS滤镜—波形效果

图片CSS滤镜—波形加上半透明合成效果

xray

none

使用黑白色显示带有反转色和亮度值的元素

filter:xray;

图片CSS滤镜—X光效果

欢迎光临启野博客!
  
 
 
 
  评论这张
 
阅读(6581)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017