filter 滤镜

今天在做一个项目时，接触到了这个属性。再一次见识到了CSS的强大。

先来看看兼容性

很遗憾IE全军覆没了，但是其他浏览器还是可以的。接下来我们来看看他有哪些厉害之处。

blur()，blur功能函数就是来设置图片的模糊程度。

filter: blur(10px);

值就是模糊半径，效果图如下。

brightness():就是通常所说的亮度

filter: brightness(0);

当值设置成0或者不设置值时，会全黑。当设置100%时，就是原图效果，如果>100%,那么就会比原图更亮

                                                          

contrast()：对比度。

hue-rotate(): 颜色调整，怎么调整。传入一个角度值，按照color wheel来进行旋转

invert():颜色反转。一张全白的图片经过invert(100%)后变成一张纯黑色

grayscale()：灰度

opacity()  透明

saturate()  :饱和度  使图片看起来更加艳丽

sepia() ：老化

drop-shadow()  阴影，这个和box-shadow很像，但是还是有区别的，box-shdow(下图左)，drop-shadow(下图右)

        

url()：传入SVG链接。

使用方法都很简单，有机会做成这个网站https://html5-demos.appspot.com/static/css/filters/index.html

参考链接：http://tympanus.net/codrops/css_reference/filter

时间： 2024-12-26 20:59:11

filter 滤镜的相关文章

filter滤镜的使用

刚开始学css,开始遇到filter不懂什么意思后来到网上查了,觉得解释的很全面,就把它抠下来,以便自己经常来看看. CSS滤镜的使用方法:filter:filtername(parameters) 即 filter:滤镜名称(参数) alpha:设置透明层次blur:创建高速度移动效果,即模糊效果chroma:制作专用颜色透明DropShadow:创建对象的固定影子FlipH:创建水平镜像图片FlipV:创建垂直镜像图片glow:加光辉在附近对象的边外gray:把图片灰度化invert:反色l

CSS中filter滤镜的学习笔记

1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity.finishOpacity.style.startX.startY.finishX.finishY.add.direction.strength blur 在指定的方向和位置上产生动感模糊效果 a

css3中强大的filter(滤镜)属性

CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web

CSS中filter滤镜学习笔记

1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity.finishOpacity.style.startX.startY.finishX.finishY.add.direction.strength blur 在指定的方向和位置上产生动感模糊效果 a

css: CSS3 filter(滤镜) 的使用

CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度). 定义和使用 默认值 none 继承 no 动画支持 是.详细可查阅 CSS 动画 版本 CSS3 JavaScript 语法 object.style.WebkitFilter="grayscale(100%)" CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | graysca

filter(滤镜) 属性

Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊: 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗.如果值是0%,图像会全黑.值是100%,则图像无变化.其他的值对应线性乘数效果.值超过100%也是可以的,图像会比原来更亮.如果没有设定值,默认是1. co

css3 filter滤镜

功能: 滤镜可以对图片,进行色彩上的处理. 用法: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 示例: 自己做了一个可调节的滤镜,链接:http://ljhgr.ccaeo.com/link/filter/index.html 后语: 可以用滤

CSS3 新特性（box-sizing盒模型，filter滤镜，calc函数，transition过渡）

1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可分为两种情况: 1. box-sizing:content-box   盒子大小为 width + padding + border(默认) 2. box-sizing:border-box     盒子大小为 width 如果盒子模型我们改为了 box-sizing:border-box,

Css3 filter(滤镜)

2015-12-20  17:05:13 css3的filter滤镜效果.... css3的filter滤镜效果,filter是W3C CSS filter Effect 1.0中定义的滤镜效果,一个使用CSS来改变图片的模糊度.亮度.对比度.饱和度等等效果的过滤器. index.html中的代码如下: style.css中样式设置为: 其中,background-attachment属性用于定义背景图片随滚动轴的移动方式,取值: scroll | fixed | inherit: scroll