关于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功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- 第13章 Salesforce Lightning应用程序
13.1 Lightning应用程序 13.1.1 什么是闪电应用程序 Salesforce应用程序有两种风格:经典应用程序和闪电应用程序.经典应用程序在Salesforce Classic中创建和管 ...
- go 语言学习 ---解析xml
实例1 //main package main import ( "bytes" "encoding/xml" "fmt" "io ...
- Nginx惊群问题
Nginx惊群问题 "惊群"概念 所谓惊群,可以用一个简单的比喻来说明: 一群等待食物的鸽子,当饲养员扔下一粒谷物时,所有鸽子都会去争抢,但只有少数的鸽子能够抢到食物, 大部分鸽子 ...
- FastDFS安装指南
FastDFS安装指南 提前准备好的文件资料: 1.FastDFS--tracker安装 1.1 FastDFS安装环境 FastDFS是C语言开发,建议在linux上运行,本教程使用Centos7. ...
- 2.8_Database Interface ADO由来
OLE-DB,它无法广为流行,因为如下两点: 1.由于OLE-DB太底层化,使用上非常复杂,需要程序员拥有高潮的技巧. 2.OLEDB标准的API是C++API,只能供C++语言调用. 为了使得流行的 ...
- C# Java的加密的各种折腾
24位加密 Java public class DESUtil { private static final String KEY_ALGORITHM = "DESede"; pr ...
- DBCP数据库连接池初探
1. 概述 数据库连接是很“宝贵的”,如果每次获取Connection都去创建数据库连接,使用之后就断开,再次使用又重新创建,程序效率是很低的.因为Socket连接的建立很消耗资源. 所以需要数据库连 ...
- 易百教程人工智能python修正-人工智能数据准备-预处理数据
预处理数据 在我们的日常生活中,需要处理大量数据,但这些数据是原始数据. 为了提供数据作为机器学习算法的输入,需要将其转换为有意义的数据. 这就是数据预处理进入图像的地方. 换言之,可以说在将数据提供 ...
- isolate sqflite demo
main.dart import 'package:flutter/material.dart'; import 'demo_isolates.dart'; import 'package:rxdar ...
- npm 安装 react-devtools
由于不能科学的上网.网上看资料装上了这个插件,装的过程有点坑.记录一下,希望能帮到和我一样的新手. 1.第一步,克隆下远程仓库的东西. 桌面右键,git-bash.然后输入: git clone ht ...