文档章节

Css3 filter图片处理

IamOkay
 IamOkay
发布于 2015/08/08 07:55
字数 460
阅读 154
收藏 2

CSS3 增加了filter,即过滤功能,此功能非IE得filter

我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意:此处的CSS3 filtercss filter完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么?大家感兴趣的可以点击这里我就不多说了,因为说也说不清楚,我只想和大家一起探讨的是如休整使用这个“CSS3 Filter”。那我们开始吧。

Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。

语法

      elm {
        filter: none | <filter-function > [ <filter-function> ]* 
      }

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

    其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

    1. grayscale灰度

    2. sepia褐色(求专业指点翻译)

    3. saturate饱和度

    4. hue-rotate色相旋转

    5. invert反色

    6. opacity透明度

    7. brightness亮度

    8. contrast对比度

    9. blur模糊

    10. drop-shadow阴影

    浏览器的兼容性

    目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary

    关于兼容性方案请参考CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解


    © 著作权归作者所有

    IamOkay

    IamOkay

    粉丝 204
    博文 483
    码字总数 403228
    作品 0
    海淀
    程序员
    私信 提问
    浅谈CSS3 Filter的10种特效

    必须要说明的是,这里的CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念,也不是我们所熟悉的IE滤镜,它是指通过CSS或SVG渲染元素概念可以描述的元素,包括它的子元素。 关于CSS3 ...

    lovethe51cto
    2016/04/07
    0
    0
    HTML5/CSS3系列教程:使用SVG图片

    日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。 SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信...

    gbin1
    2013/03/26
    422
    1
    CSS3 Filter的十种特效

    Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神...

    飛飛飛jjs
    2016/12/06
    0
    0
    CSS3如何将彩色图片转换成黑白图片?

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧: 我想光看上面...

    欠你一滴泪
    2017/12/14
    0
    0
    你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。 OK,...

    chokcoco
    2017/09/14
    0
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    OSChina 周三乱弹 —— 调查人员问狗 那你在做什么啊?

    Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Let It Be》- John Denver 《Let It Be》- John Denver 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :每天看一遍,...

    小小编辑
    今天
    6
    0
    高效程序员的45个习惯总结版-文末脑图

    1 做事 一个重大的错误应该被当做一次学习而不是指责他人的机会,团队成员一起工作,应该互相帮助,而不是互相指责 2 欲速则不达 不要为了修复问题而去修复,要投入时间和精力保持代码整洁 ...

    阿提说说
    今天
    18
    0
    带南海九段线分位数地图可视化(R语言版)

    今天带来一篇承诺虾神的可视化博客。内容是使用R语言进行带南海九段线分位数地图可视化。虾神的原博文地址如下(Python版)。 Python实现带南海九段线分位数地图完整可视化版本(附代码及数据...

    胖胖雕
    今天
    12
    0
    Nginx 的进程结构,你明白吗?

    Nginx 进程结构 这篇文章我们来看下 Nginx 的进程结构,Nginx 其实有两种进程结构: 单进程结构 多进程结构 单进程结构实际上不适用于生产环境,只适合我们做开发调试使用。因为在生产环境中...

    武培轩
    今天
    20
    0
    蓝鲸平台部署

    环境 系统:Centos7 依赖包:java8 主机: 10.0.1.150 域名:paas.ops.net;cmdb.ops.net;job.ops.net 生成SSH key ssh-keygen -t rsa -P '' 生成证书 https://bk.tencent.com/download_ssl/......

    以谁为师
    今天
    7
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部