`

css图片滤镜大全

    博客分类:
  • CSS
css 
阅读更多


语法: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="40",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

分享到:
评论

相关推荐

    CSS滤镜效果大全

    ### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的透明效果,包括简单的透明度调整到复杂的渐变透明。 - **表达格式**: ```...

    css 滤镜大全,全部css滤镜

    CSS滤镜是现代Web设计中一个非常强大的工具,它们允许开发者在不使用任何图像编辑软件的情况下,对网页上的图片和元素应用各种视觉效果。在给定的文件中,提到了一系列的CSS滤镜效果,接下来将对这些滤镜进行详细的...

    纯CSS3图片滤镜效果.zip

    纯CSS3图片滤镜效果是现代网页设计中一个引人注目的特性,它允许开发者无需借助JavaScript或者其他图像处理软件,就能直接在浏览器中为图片应用各种视觉特效。这个压缩包"纯CSS3图片滤镜效果.zip"很可能包含了若干...

    js+css滤镜实现动态图片显示

    【标题】"js+css滤镜实现动态图片显示"揭示了使用JavaScript和CSS技术来创建交互式、动态的图片展示效果。在Web开发中,图片的动态显示不仅可以增强用户体验,还可以为网站或应用增添视觉吸引力。这篇博客文章通过...

    CSS教程【CSS样式CSS滤镜】CHM版

    CSS滤镜是一种可以对网页元素进行图像处理的技术,常用于图片效果的增强或者创建特殊视觉效果。滤镜主要在CSS3中引入,目前在现代浏览器中广泛支持。常见的CSS滤镜有: - `blur()`: 使元素模糊。 - `brightness()`:...

    css部分滤镜效果代码

    CSS滤镜常用于图片、背景、按钮和其他UI元素的美化。例如,可以创建动态滤镜效果,通过JavaScript或CSS动画改变滤镜参数,实现交互式用户体验。 总结,CSS滤镜效果是现代网页设计中的重要工具,通过灵活组合不同的...

    css滤镜大全 美化网站不再困难

    本资源“css滤镜大全 美化网站不再困难”提供了详尽的CSS滤镜使用指南,帮助设计师和开发者更好地理解和应用这些功能。 首先,我们要了解CSS滤镜的基本概念。滤镜是一种可以改变元素外观的样式属性,通常用于图像...

    js+css 滤镜 切换图片

    本篇文章将详细介绍如何利用这些技术实现一个简单但有趣的图片滤镜切换功能。 #### 核心概念解析 - **JavaScript**: 一种常用的脚本语言,用于实现网页上的交互效果。 - **CSS滤镜**: CSS提供了一组滤镜效果,可以...

    HTML5/CSS3实现图片多种滤镜特效

    这是一款基于HTML5和CSS3的图片滤镜特效应用,每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外,你也可以切换图片,特别是应用在相册应用中,你不仅可以浏览不同的图片,而且对同一张图片可以有多种特效...

    CSS解决滤镜黑圈问题

    在CSS世界中,滤镜效果是一种强大的工具,用于改变元素的视觉表现,如调整颜色、模糊、饱和度等。然而,不同的浏览器对CSS滤镜的支持程度不同,尤其是在较老的版本如IE10及以下,可能会出现一些兼容性问题。在这些...

    ASP.NET水印图片_CSS滤镜特效

    ASP.NET水印图片技术结合CSS滤镜特效,可以为网站上的图像添加独特的视觉效果,同时保护版权信息。本文将深入探讨这两个主题,帮助你更好地理解和应用它们。 首先,让我们了解ASP.NET水印图片。在ASP.NET框架中,...

    css3 filter滤镜属性制作图片滤镜特效

    在“css3 filter滤镜属性制作图片滤镜特效”这一主题中,我们将深入探讨如何利用CSS3滤镜来创建令人惊叹的图片特效。 首先,滤镜属性的基本语法是: ```css element { filter: function1(value) function2(value)...

    html5 css3设置filter图片滤镜代码

    接下来,在CSS文件中,我们就可以为这个图片应用滤镜效果了。`filter`属性的语法格式如下: ```css #image-filter { filter: function; } ``` 这里`function`可以是各种滤镜函数,例如: 1. **grayscale(%)**:...

    HTML5+CSS仿Instagram应用图片滤镜效果

    CSS部分,特别是`css`文件夹中的样式表,是实现图片滤镜效果的核心。CSS滤镜是一个强大的特性,允许开发者对元素应用各种视觉效果,如模糊、灰度、饱和度、亮度、对比度、色调、饱和度、曝光度等。例如,`filter`...

    精通CSS滤镜.chm + CSS中文教程.exe

    CSS滤镜还可以与CSS的其他特性结合使用,如混合模式(blend modes)和图片精灵(image sprites),创造出丰富的视觉效果。同时,滤镜功能在现代浏览器中得到了广泛支持,但老版本的浏览器可能不支持,因此在实际应用...

    滤镜CSS3效果

    在压缩包文件“filters”中,可能包含了示例代码、教程文档或预览图片,帮助用户更直观地理解并实践CSS3滤镜的各种效果。通过查看这些资源,可以深入学习如何在实际项目中应用滤镜,以及如何通过调整参数来达到理想...

    CSS 滤镜效果(查询用)

    ### CSS滤镜效果详解 #### 一、Alpha Alpha滤镜用于设置元素的透明度,可以为元素的不同部分设定不同的透明度。通过调整参数,可以让元素实现渐变透明的效果。 - **语法**: `filter: alpha(opacity=opacity, ...

    一个不错的css3滤镜网页特效

    这些滤镜效果可以用于图片、背景、甚至整个网页,使得设计师能够创造出独特的视觉体验。以下是一些关键的CSS3滤镜知识点: 1. **模糊滤镜(blur)**:通过增加元素像素的混合,使得图像变得模糊。例如,`filter: ...

Global site tag (gtag.js) - Google Analytics