CSS3属性之—

filter作为CSS3的属性，是作为滤镜效果出现的，主要功能是对图片进行一些处理，当然还可以对video进行作用，我们这里暂且只讨论对图片的处理效果。看到图片处理。我们是否会联想到一系列其他的处理方式呢？PhotoShop?用MATLAB进行图像处理？不错，filter一词的确与MATLAB中的filter作用相同，但是使用方法不尽相同。接下来我们一起来看看都可以怎样实现不同的效果。

首先我们新建一个html文档，（我用的是sublime text 编码器）为了方便起见，我们采用在html文档中使用style标签直接嵌入CSS样式的方式。为了进行效果比较，我们插入两张一样的图片，大小设置为100px。第二章图片作为效果图使用，将其class设置为pic。效果如图显示

考虑到浏览器的兼容性，我们使用IE 9.0及以上版本或者使用Chrome18.0.97及以上版本。这里我使用的是IE9.0版本，接下来我们看插入效果图。

然后进入我们的效果编码效果展示部分：

一、grayscale特效，grayscale的作用是把图片变成黑白图。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:grayscale(1);（-webkit-作用是处理浏览器兼容性）效果如图所示

grayscale特效

二、sepia特效，sepia的作用是把图片变成褐色，产生复古效果。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:sepia(1);效果如图所示

sepia特效

三、saturate特效，saturate的作用还是设置更改图片的饱和度，可根据自己对图片饱和度的要求任意设置。这里设置为5，

在style中给.pic设置属性，写入这样一行代码：--webkit-filter:saturate(5)；

效果如图所示

saturate特效

四、hue-rotate特效，saturate的作用是改变色相，属性值为角度，默认值。0deg

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:hue-rotate(90deg);效果如图所示

hue-rotate特效

五、opacity特效，opacity的作用是设置改变图片的透明度，默认值100%。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:opacity(.1);效果如图所示

opacity特效

六、invert特效，invert的作用效果和相机底片一样，进行反色,默认值100%。

invert特效

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:invert(1);效果如图所示

七、brightness特效，brightne的作用是改变设置图片的亮度，默认值100%。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:brightness(.5);效果如图所示

brightness特效

八、contrast特效，contrast的作用是改变设置图片的对比度，默认值100%。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:contrast(2);效果如图所示

contrast特效

九、blur特效，blur的作用是改变图片的清晰度，默认值为0。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:blur(2px);效果如图所示

blur特效

十、drop-shadow特效，drop-shadow的作用是产生阴影。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:drop-shadow(2px);效果如图所示

drop-shadow特效

当然根据需要可以同时使用两种或几种特效达到最好的效果。

CSS3属性之——filter相关推荐

CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...
css3属性基本骨架
css3属性浏览器前缀 -ms-代表IE浏览器 -khtml-代表苹果浏览器 -moz-代表火狐浏览器 -o-代表欧朋浏览器 -webkit-代表谷歌浏览器字体 1.text-shadow设置文字 ...
CSS3 属性样式总结记录（图文）
CSS3 属性样式总结记录 1 .边框-背景 border-image 设置所有边框图像的速记属性. 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-s ...
CSS3属性的兼容什么是弹性和布局
CSS3新特性,兼容性,兼容方法总结 css3手册css3手册边框 border-radius 用于添加圆角效果语法: border-radius:[ <length> | <p ...
国家纪念日引起的一个css属性思考 ------ filter属性
前言 2020年4月4日早上10点 , 全国性哀悼活动正式开展 , 在向逝去的生命和前线壮烈牺牲的烈士致哀同时 , 依旧不忘加班 , 如往常打开浏览器 , 然后发现 , 基本上所有的网站都变灰了 , ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3属性选择器属性选择器列表: 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
css3属性选择器总结
css3属性选择器总结 (1)E[attr]只使用属性名,但没有确定任何属性值 <p miaov="a1">111111</p> <p miaov=& ...

CSS3属性之——filter

CSS3属性之——filter相关推荐

最新文章

热门文章