今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性。

// 修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

其中还有毛玻璃属性:blur

// 图片使用高斯模糊效果:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}

filter css详细属性:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

关于css3属性filter的更多相关文章

  1. 一个非常有意思的css3属性filter

    filter这属性貌似可以是img图片在黑白与彩色间转换 filter:grayscale(1)为黑白色,filter:grayscale(0)位彩色,可以用于hover效果 img:hover{fi ...

  2. 学习笔记:CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  3. CSS3的filter用法

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

  4. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  5. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  6. css3属性 -webkit-filter

    css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...

  7. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  8. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  9. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

  1. mysql中常见正则表达式的应用

    查找name字段中以'st'为开头的所有数据: mysql> SELECT name FROM person_tbl WHERE name REGEXP '^st'; 查找name字段中以'ok ...

  2. Python Django 协程报错,进程池、线程池与异步调用、回调机制

    一.问题描述 在Django视图函数中,导入 gevent 模块 import gevent from gevent import monkey; monkey.patch_all() from ge ...

  3. js获取项目名称

    //获取路径 var pathName=window.document.location.pathname; //截取,得到项目名称 var projectName=pathName.substrin ...

  4. NIO(2):Channel

    Channel可以理解为铁轨,Buffer是铁轨上的火车.铁轨的两端连接这文件描述符或者说文件的缓冲区和程序运行时的内存.借助NIO是一种更加符合OS底层文件系统的调用方式,使用NIO可以用更小的开销 ...

  5. 匿名对象序列化为XML

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  6. rabbitmq保证数据不丢失方案

    rabbitmq如何保证消息的可靠性 1.保证消息不丢失 1.1.开启事务(不推荐) 1.2.开启confirm(推荐) 1.3.开启RabbitMQ的持久化(交换机.队列.消息) 1.4.关闭Rab ...

  7. javascript原型链[图]

  8. "Oracle要对Java收费了,SAP基于Java技术栈的那些产品的客户怎么办"

    今年年初的时候,所谓"Oracle要对Java收费"的新闻,在网上传得沸沸扬扬.这个新闻被专业人士视为标题党,而国内众多技术论坛,比如知乎社区上,有很多大神对"Java收 ...

  9. Winform开发1

    VS的Winform开发中,TextBox可能拖过来的时候不能改变其高度,这就要在其属性Multiline为True.

  10. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...