文档章节

CSS3的滤镜效果(-webkit-filter)

Rickxue
 Rickxue
发布于 2015/11/23 10:35
字数 419
阅读 12
收藏 0

    -webkit-filter是css3的一个属性,它能通过通过设定不同属性,来做到不用ps就能做到:高斯模糊,调整灰度值,对比度,亮度等等效果。这样对于一张图片,如果你希望因为不同的状态而想要得到这张图片的不同图片效果的话,就不用再另外做一张图片,来进行两张图片之间的相互转换。通过一个css3属性就能完成。

    通过-webkit-filter的滤镜效果,对图片来进行效果控制,对页面浏览性能,效果变换性能都有很大的提升。

   -webkit-filter:现在规范中支持的效果有:

  • grayscale 灰度               值为0-1之间的小数 

  • sepia 褐色         值为0-1之间的小数

  • saturate 饱和度     值为num

  • hue-rotate 色相旋转  值为angle(deg)

  • invert 反色        值为0-1之间的小数

  • opacity 透明度     值为0-1之间的小数

  • brightness 亮度     值为0-1之间的小数

  • contrast 对比度     值为num

  • blur 模糊           值为length

  • drop-shadow 阴影

 这里展示下阴影的效果,其他效果可自己尝试!

  -webkit-filter:drop-shadow(10px 10px 10px #000)

© 著作权归作者所有

共有 人打赏支持
Rickxue
粉丝 5
博文 42
码字总数 15873
作品 0
程序员
Css3 filter图片处理

CSS3 增加了filter,即过滤功能,此功能非IE得filter 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是...

IamOkay
2015/08/08
0
0
-webkit-filter用法

这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。 现在规范中支持的效果有: grayscale 灰度 sepia 褐色 saturate 饱和度 hue-ro...

小潜水艇
2013/12/07
0
0
你需要知道的CSS3 动画技术

译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 转自:http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html 译序: 本文译自Sma......

晨曦之光
2012/03/09
0
0
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
0
0
CSS实现跨浏览器兼容性的盒阴影效果

CSS实现跨浏览器兼容性的盒阴影效果 一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果: 然而,在CSS2的时代,我们多半使用图...

0000001
2011/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
7
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
5
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部