今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了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. golang ---获取内存信息

    package main import ( "fmt" "syscall" "unsafe" ) var kernel = syscall. ...

  2. win7远程服务器发生身份验证错误,要求的函数不受支持

    远程服务器发生身份验证错误,要求的函数不受支持,远程登录服务器以前都是正常的,今天登录远程桌面就一直是这样的错误.记录一下解决方法. 方法一:卸载补丁KB41037181.打开控制面板,找到“程序和功 ...

  3. c#中冒泡排序算法描述

    int temp = 0; int b = 0; int[] arr = { 23, 44, 66, 76, 98, 11, 3, 99, 7 };# region该段与排序无关Console.Wri ...

  4. Unity UnityWebRequest实现与后端的交互

    一般我们与后端对接的时候会用到UnityWebRequest这里简单使用这个与后端进行交互这个是总类 using UnityEngine;using System.Collections;using ...

  5. 【UVA1505】 Flood-it!(IDA*)

    题目链接 IDA*,估价函数为当前除了左上角的连通块以外颜色的种类数,因为每次最多消去一个颜色. 维护位于当前连通块的边缘但颜色不同的点,每次从这些点拓展就行. #include <cstdio ...

  6. BUAA_OO第四单元总结性博客作业——UML(Floyd实现规则检查?)

    一.架构设计 1.UML第一次作业——类图 第一次作业基于不同element在UML规格中的从属关系来设计架构.继承了UmlInteraction接口的MyUmlInteraction类是主要的交互层 ...

  7. Postgres 多实例实例部署方式

    Postgres 数据库在原有示例正常运行情况下,新增一个端口示例,主要目的解决新的项目和原有项目的数据库部署不在冲突,可以独立运行,备份和还原数据互不影响,主要用的的命令有  initdb 数据库初 ...

  8. 代替for-in 遍历对象

    object.keys() object.getOwnPropertyName()

  9. MySQL Backup--xtrabackup与Bulk Load for Create Index

    场景描述:主从使用MySQL 5.7.19 1.从库上使用xtrabackup进行热备. 2.主库行执行DDL创建索引: ALTER TABLE `tb_xxx` ADD INDEX idx_good ...

  10. layui 多个文件上传控件 整合缩减代码

    // 图片上传 upload.render({ elem: '.upload-img' // 点击上传的按钮统一使用该类 ,url: "{:url('image/upload')}" ...