文档章节

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
博文 41
码字总数 14418
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
16分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
17分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
20分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
20分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部