css3 滤镜 模糊,黑白,对比度等滤镜效果效果
2015-04-24 22:45
447 查看
先上代码:
sepia褐色(求专业指点翻译)
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
附上大漠翻译的博客网址和这些属性在线测试的网址,分别如下
http://www.w3cplus.com/css3/ten-effects-with-css3-filter http://jsfiddle.net/w3cplus/wThjx/
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
故名思议,这是一个用来达到模糊图片或者其他东西的属性,加载body页面可以模糊整个页面,据说也可以用在video上窝,这种用来做模拟加载效果很实用。
详解filter属性:注意我说的这个filter是css3filter,不是ie滤镜filter,
css3 filter的属性值有一下几个:
grayscale灰度 filter:grayscale(1)代表完全灰色,也就是黑白色,用法下面的都是一样的,填一个参数。
sepia褐色(求专业指点翻译)
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
附上大漠翻译的博客网址和这些属性在线测试的网址,分别如下
http://www.w3cplus.com/css3/ten-effects-with-css3-filter http://jsfiddle.net/w3cplus/wThjx/
相关文章推荐
- 使用CSS3滤镜开发模糊背景(毛玻璃)效果
- css3 滤镜效果(黑白滤镜、模糊化处理等)
- iOS中对图片的处理(对图片进行滤镜处理、调整图片饱和度、亮度、对比度、创建一张实时模糊效果 View (毛玻璃效果)、截取一张 view 生成图片)
- CSS3 -webkit-filter 滤镜效果
- C#图像处理(各种旋转、改变大小、柔化、锐化、雾化、底片、浮雕、黑白、滤镜效果)
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- CSS3 -webkit-filter 滤镜效果
- C#图像处理(各种旋转、改变大小、柔化、锐化、雾化、底片、浮雕、黑白、滤镜效果)
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
- css3中的滤镜效果
- css3高级滤镜-渐隐效果
- Direct3D提高篇:HLSL编程实现PhotoShop滤镜效果 - 锐化模糊
- C#图像处理(各种旋转、改变大小、柔化、锐化、雾化、底片、浮雕、黑白、滤镜效果)
- CSS3实现的图片模糊过滤效果
- CSS3实用技巧:几行代码实现图片黑白效果
- VC++ 制作滤镜效果(底片效果、雕刻效果、黑白效果)
- IE滤镜与CSS3效果
- css3图片模糊过滤效果
- 滤镜帮助IE实现部分CSS3效果整理