今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了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. Docker安装带中文全文搜索插件zhparser的Postgresql数据库

    上一篇讲了在已经安装了PG数据库的情况下,安装全文搜索插件zhparser遇到的问题.在一个全新的环境中安装带有全文搜索插件zhparser的PG数据库,可以使用已经做好的Docker镜像,在安装的过 ...

  2. ① Python3.0基础语法

    稍微了解一下py2.0和py3.0的区别,Py3.0在设计的时候,为了不带入过多的累赘,没有考虑向下兼容低版本的Py2.0.而在低版本中Py2.6作为过渡版,基本使用Py2.x的语法和库,同时考虑Py ...

  3. 命令行获取docker远程仓库镜像列表

    命令行获取docker远程仓库镜像列表 获取思路 通过curl获取镜像tag的json串,解析后得到${image}:${tag}的格式 curl获取示例 # curl [:-s] ${API}/${ ...

  4. 在safari下input的placeholder设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font- ...

  5. Androidx初尝及其新旧包对照表

    x的最低实验条件 AndroidStudio 3.2.0+ gradle:gradle-4.6以上 本次实验条件: AndroidStudio 3.3 (强制要求最低gradle版本为gradle-4 ...

  6. 汇总iOS开发中需要用到的开源库

    来源:http://mobile.51cto.com/hot-431256.htm 1.iOS &iPhone 网络异步加载 asi-http-request [1-1 ASI HTTP 下载 ...

  7. 一个时间O(n)的洗牌算法

    //一种O(n)的洗牌算法 vector<int> randNUms(vector<int> &nums, int m) { int len = nums.size() ...

  8. 【zookeeper】linux中编写脚本批量启动zookeeper

    实现功能:一键启动.关闭主从端3个节点上的zookeeper,附加查看启动状态 mkdir bin --新建文件夹 cd bin 跳转到bin文件夹里 touch zookeeperstart.sh ...

  9. python(函数调用)

    1.在原文件中调用 def abc(x,y): print x + y abc(2,3) #直接通过函数名加括号进行调用传参 2.同一个包(package)下面调用不同文件中的函数 "&qu ...

  10. Replica set 的选举策略之一 (转)

    首先介绍一下在replica set里分为三种节点类型: 1 primary   负责client的读写. 2 secondary 作为热备节点,应用Primary的oplog读取的操作日志,和pri ...