关于css3属性filter
今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了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的更多相关文章
- 一个非常有意思的css3属性filter
filter这属性貌似可以是img图片在黑白与彩色间转换 filter:grayscale(1)为黑白色,filter:grayscale(0)位彩色,可以用于hover效果 img:hover{fi ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3的filter用法
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
- css3属性兼容性
来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...
- CSS3 之filter毛玻璃效果弹窗
先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- css3属性 -webkit-filter
css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- 在 WPF 中获取一个依赖对象的所有依赖项属性
原文:在 WPF 中获取一个依赖对象的所有依赖项属性 本文介绍如何在 WPF 中获取一个依赖对象的所有依赖项属性. 本文内容 通过 WPF 标记获取 通过设计器专用方法获取 通过 WPF 标记获取 p ...
- Abp session和Cookie
问道 面向Abp 在面向服务的时候,Session 干嘛用? 先把Session 的作用说了,但是在微服务环境下给忽略了,相当于忽略了核心. Session 只是个功能.就是根据Cookie 的Ses ...
- CMake配置VTK时Qt5_DIR-NOTFOUND的解决方法
直接给解决方法了,不废话. Qt5的路径,请参考:C:\Program\IDE\Qt\Qt5.13.0\5.13.0\msvc2017_64\lib\cmake\Qt5 参考文章 CMake配置VTK ...
- 为新装的Centos 7X更换源,升级VIM失败,待解决
CentOS 7X使用阿里云CentOS的yum源 1.备份原有repo文件 #cd /etc/yum.repos.d #mv /etc/yum.repos.d/CentOS-Base.repo /e ...
- Programming Principles and Practice Using C++ Notes2
第三章对象.类型和值 对象:用来保存一个指定类型值的一些内存单元. 类型:定义一组可能的值与一组运算(对于一个对象). 值:根据一个类型来解释的内存中的一组比特. #include <iostr ...
- 8. :before 和 ::before 区别?【CSS】
单冒号(:)用于CSS3伪类 双冒号(::)用于CSS3伪元素 对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的.
- JS解析xml字符串,并把xml展示在HTML页面上
首先,要写一个方法,把xml字符串转化成dom对象 //将字符串转化成dom对象;string转换为xml function stringToXml(xmlString) { var xmlDoc; ...
- PHP/Python---百钱百鸡简单实现及优化
公鸡5块钱一只,母鸡3块钱一只,小鸡一块钱3只,用100块钱买一百只鸡,问公鸡,母鸡,小鸡各要买多少只? 今天看到这题很简单 ,但是随手写出来后发现不是最优的
- 【JUC】5.线程池—Executor
创建线程池可以分为三种方式: 1. 通过ThreadPoolExecutor的构造方法,创建ThreadPoolExecutor的对象,即一个线程池对象: 此构造方法,一共7个参数,5个必须参数,2个 ...
- 4.kafka API producer
1.Producer流程首先构建待发送的消息对象ProducerRecord,然后调用KafkaProducer.send方法进行发送.KafkaProducer接收到消息后首先对其进行序列化,然后结 ...