`
wdanping
  • 浏览: 23580 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

CSS的filter常用滤镜属性及语句大全

阅读更多
语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
Alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样

1、滤镜:Alpha
语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明:
Opacity:起始值,取值为0~100, 0为透明,100为原图。
FinishOpacity:目标值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、滤镜:blur
语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:
Add:一般为1,或0。
Direction:角度,0~315度,步长为45度。
Strength:效果增长的数值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")

3、滤镜:Chroma
语法:STYLE="filter:Chroma(Color = color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")

4、滤镜:DropShadow
语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值。
Offy:Y轴偏离值。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、滤镜:FlipH
语法:STYLE="filter:FlipH"
例子:filter:FlipH

6、滤镜:FlipV
语法:STYLE="filter:FlipV"
例子:filter:FlipV

7、滤镜:glow
语法:STYLE="filter:Glow(Color=color, Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")

8、滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray

9、滤镜:invert
语法:STYLE="filter:Invert"
例子:filter:Invert

10、滤镜:mask
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")

11、滤镜:shadow
语法:filter:Shadow(Color=color, Direction=direction)
说明:
Color:#rrggbb格式。
Direction:角度,0-315度,步长为45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")

12、滤镜:wave
语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、滤镜:Xray
语法:STYLE="filter:Xray"
例子:filter:Xray

14.颜色变化
语法:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');
分享到:
评论

相关推荐

    CSS的filter常用滤波器属性及语句大全

    在CSS的世界里,`filter`属性提供了一种强大的方式来改变元素的视觉效果,通过应用各种图像处理滤镜。在给定的文件信息中,详细列出了多种常用的滤波器属性及其参数设置方法,让我们深入探讨这些滤波器的具体功能与...

    推荐个Css的filter常用滤波器属性及语句大全

    下面我们将详细介绍在CSS中常用的`filter`滤波器属性及其语句。 1. **Alpha滤镜**: `filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX...

    css-dictionary(CSS常用英语词汇详解)

    CSS中的`filter`属性可以应用于图片或背景,以添加多种视觉效果。 - **Font**: 字体。CSS中的`font`属性用于设置文本的字体系列、大小、粗细等。 - **First**: 第一个。用于描述序列中的首个元素或项目。 - **For**:...

    CSS教程

    * CSS 语句的基本结构是:选择符{属性:属性值} * 选择符可以是 HTML 中任何的标识符,如 P、DIV、IMG、BODY 等。 * 属性是设置样式的选项,如 WIDTH、FILTER、FONT-SIZE 等。 * 属性值是设置的具体值,如 200、blur...

    CSS样式表学习从门到精通

    CSS 的基本语句结构是 `选择符 { 属性: 属性值 }`,它由三个部分组成:选择符、属性和属性值。选择符可以是 HTML 中任何的标识符,如 `P`、`DIV`、`IMG`、`BODY` 等。 在 CSS 中,我们可以使用内嵌样式(Inline ...

    软件开发中界面的滤镜的效果和附带说明

    css滤镜的标识符式“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 css滤镜分类。可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能...

    CSS样式表.docx

    CSS 语句的基本结构是选择符{属性:属性值}。其中,选择符可以是 HTML 中任何的标识符,比如 P、DIV、IMG 甚至 BODY 都可以作为选择符。属性是指样式的特征,如宽度、颜色、字体等。属性值是指属性的具体值,如 200...

    javascript经典特效---图片滤镜效果.rar

    3. **滤镜函数**:在Canvas上,可以使用`context.drawImage()`方法绘制图片,并通过`context.filter`属性设置CSS滤镜效果,如`grayscale()`, `sepia()`, `blur()`, `brightness()`, `contrast()`, `hue-rotate()`, `...

    css教程从入门到精通.pdf

    在CSS中,基本的语句结构为“选择符 { 属性:属性值 }”。在这个结构中,选择符是指你要应用样式的HTML元素,例如`div`、`p`或`img`等。属性是你要修改的样式属性,如`width`、`color`或`font-size`,而属性值则是...

    IE下css if条件

    5. **滤镜(filter)属性**:IE特有的滤镜属性,如`progid:DXImageTransform.Microsoft.gradient`用于实现渐变效果,或者`alpha(opacity=xx)`用于设置透明度。 6. **负边距问题**:IE6不正确处理负边距,导致浮动...

    css照片表白+音乐特效

    在这个项目中,CSS被用来实现照片的展示方式、表白语句的动画效果以及与音乐联动的交互功能。 首先,CSS在照片表白中起到关键作用。它可以用来设置照片的尺寸、位置、边框、阴影等视觉属性,也可以通过背景图片、...

    经典css教程(适合初学者)

    例如,模糊滤镜`filter: blur()`可以创建模糊效果。滤镜函数内可以设置多个参数,以定义模糊的类型和程度。滤镜功能非常强大,它们使网页设计师能够在不使用图片编辑软件的情况下,为网页添加复杂的视觉效果。 CSS...

    Js+css3宝丽来风格的相册图片幻灯片展示代码

    其次,CSS3将用于塑造宝丽来的视觉效果,如滤镜(`filter`)、变换(`transform`)和过渡(`transition`)等属性,以实现图片的倾斜、模糊和动画效果。值得注意的是,这个项目可能不支持旧版本的Internet Explorer...

    用这个语句可使网页为黑白

    ### 知识点一:理解CSS滤镜属性 CSS滤镜属性允许我们在网页上对图像、背景或元素应用视觉效果。通过使用`filter`属性,可以实现多种效果,包括但不限于模糊、亮度调整、对比度更改以及颜色转换等。本例中涉及的是...

    css知识总结

    以下是一些常用CSS属性及其含义: ##### 1.5.1 字体 - `font-family`: 设置元素的字体家族。 - `font-size`: 设置元素的字体大小。 - `font-style`: 设置元素的字体风格,如斜体等。 - `text-decoration`: 设置...

    Dreamwear设计常用代码 39-45.docx

    }` 这是一个CSS样式,使用滤镜(FILTER)属性中的dropshadow,创建了一个文字阴影效果,阴影颜色为#666666,水平偏移1像素,垂直偏移1像素,正向阴影。 4. **后退与关闭窗口**: - `javascript:history.back(1)` ...

    巧用CSS滤镜制作绚丽图片播放效果

    3. **插入图片并设置滤镜**:在页面中插入图片,并在`<img>`标签中添加`style`属性,设置`FILTER: revealTrans(Duration=2, Transition=23)`。这里的`Duration`参数表示过渡动画的持续时间,单位为秒;`Transition`...

    CSS3不规则瀑布流布局特效

    CSS3不规则瀑布流布局特效则在此基础上进一步创新,通过引入倾角和滤镜效果,为网页增添了更丰富的视觉体验。 首先,我们来详细了解一下CSS3中的关键知识点: 1. **Flexbox(弹性盒布局)**:虽然瀑布流布局早期多...

    html黑白样式

    现代CSS提供了丰富的滤镜功能,其中`filter`属性可以应用于任何元素上,用于修改该元素的渲染效果。在题目中给出的代码片段`html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}`,实际上是...

    CSS浏览器兼容性Hack大全

    CSS浏览器兼容性Hack是指在不同浏览器之间,由于解析标准的差异导致CSS样式表现不一致时,开发者采取的一些特殊技巧或代码修改,以确保样式在各个浏览器中正常显示。这些Hack主要针对早期版本的Internet Explorer...

Global site tag (gtag.js) - Google Analytics