CSS3的滤镜filter属性

css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。

clipboard.png

一、blur(px)高斯模糊

clipboard.png

二、brightness(%)亮度

clipboard.png

三、contrast(%)对比度

clipboard.png

四、drop-shadow()阴影

clipboard.png


注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图

clipboard.png

图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个图片加阴影,而 drop-shadow 只是给不透明的部分加阴影,这是他们最重要的区别了。

五、grayscale(%)灰度

clipboard.png

六、hue-rotate(deg)色相旋转

clipboard.png

七、invert(%)反转

clipboard.png

八、opacity(%)透明度

clipboard.png

九、saturate(%)饱和度

clipboard.png

十、sepia(%)深褐色

clipboard.png

上面都只是把每种滤镜单独拿出来,展示效果,但是其实他们是可以一起使用的,比如这样

clipboard.png

.all img{filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000);
}

注:饱和度和对比度是两个完全不同的概念,饱和对是对色彩的浓度(纯度)的定义;对比度是对画面明暗程度的定义。
理论上说,对比度是指画面黑白明暗的层次;饱和度画面中色彩的鲜艳程度与层次;

转载于:https://www.cnblogs.com/hellocd/p/filter.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Core Foundation 与 cocoa Foundation框架区别

Core Foundation框架 (CoreFoundation.framework) 是一组C语言接口,它们为iOS应用程序提供基本数据管理和服务功能。下面列举该框架支持进行管理的数据以及可提供的服务: 群体数据类型 (数组、集合等) 程序包 字符串管理 日期和时间管理 原始数据块管…

JavaScript字符串、数组、对象方法总结

字符串方法 示例字符串: const str "hello,kitty,hello,vue "; 一、基本方法 charAt() 返回指定索引的字符 startsWith() 判断字符串是否以xxx开头,返回布尔值 endsWith() 判断字符串是否以xxx结尾,返回布尔值 padStar…

云盘同步本地文件和QQ聊天记录

腾讯微云同步本地QQ聊天记录和QQ接受的文件;手机版本可同步通讯录和手机相册和视频。 360云盘同步本地文件和定时自动备份本地文件; 金山快盘可以同步通讯录、短信、通话记录和手机本地文件;(快盘仅适合同步手机信息&#xff0c…

Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战

Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战 一、写在前面 在Java生鲜电商平台平台中相信不少朋友都在自己公司使用Spring Cloud框架来构建微服务架构,毕竟现在这是非常火的一门技术。 如果只是用户量很少的传统IT系统,使用Spring Cloud可…

Objective-C Runtime的数据类型

转自:http://www.cnblogs.com/whyandinside/archive/2013/02/26/2933552.html Class Objective-C是支持反射的,先来了解一下其如何表达一个类。在Objective-C的Runtime中有个类型是Class(只在Runtime环境中使用),用来表…

CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。 方法一、利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片&#xff…

HTTP基本认证

HTTP质询/响应认证框架 HTTP提供了一个原生的质询/响应框架,简化了对用户的认证过程。HTTP的认证模型如图所示. Web服务器接收到一条HTTP请求报文时,服务器没有直接响应请求的资源,而是以一个“认证质询”进行响应,要求用户提供一…

单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。单行文本省略 .ellipsis-line {border: 1px solid #f70505;padding: 8px;width: 400px;overflow:…

数据归一化matlab及python 实现

更多细节请查看 https://www.zhihu.com/question/20455227 归一化的目的简而言之,是使得没有可比性的数据变得具有可比性,同时又保持相比较的两个数据之间的相对关系。 归一化首先在维数非常多的时候,可以防止某一维或某几维对数据影响过大…

机器学习综述

机器学习综述 摘要 本文主要参考中科院自动化研究所复杂系统与智能科学实验室王珏研究员《关于机器学习的讨论》,讨论机器学习的描述,理论基础,发展历史以及研究现状。 关键字:机器学习,科学依据,发展脉络 0引言 20世纪…

递归锁、信号量、GIL锁、基于多线程的socket通信和进程池线程池

递归锁、信号量、GIL锁、基于多线程的socket通信和进程池线程池 递归锁 死锁现象:是指两个或两个以上的进程和线程因抢夺计算机资源而产生的一种互相等待的现象 from threading import Thread from threading import Lock import time lock_A Lock() lock_B Lock(…

10 种机器学习算法的要点(附 Python 和 R 代码)

前言 谷歌董事长施密特曾说过:虽然谷歌的无人驾驶汽车和机器人受到了许多媒体关注,但是这家公司真正的未来在于机器学习,一种让计算机更聪明、更个性化的技术。 也许我们生活在人类历史上最关键的时期:从使用大型计算机&#xff0…

阻塞、非阻塞、同步与异步

阻塞、非阻塞、同步与异步 阻塞与非阻塞 进程运行的三种状态:运行、就绪、阻塞 阻塞和非阻塞: ​ 阻塞:程序运行时,遇到了IO,程序挂起,cpu被切走. ​ 非阻塞: 程序没有遇到IO,程序遇到IO但是我通过某种手段,让cpu强行运行我的程序…

8大策略让你对抗机器学习数据集里的不均衡数据

本文转自:http://www.36dsj.com/archives/35137 http://blog.csdn.net/heyongluoyao8/article/details/49408131 英文版本:http://machinelearningmastery.com/tactics-to-combat-imbalanced-classes-in-your-machine-learning-dataset/ 你是不是也经历…

线程queue、事件event及协程

线程queue、事件event及协程 线程queue 多线程抢占资源,让其保持串行的两种方式: ​ 1、互斥锁 ​ 2、队列 线程队列分为以下三种: 1、Queue(先进先出) import queueq queue.Queue(3) q.put(1) q.put(2) q.put(3) # q…

不平衡数据下的机器学习方法简介

本文转自:http://baogege.info/2015/11/16/learning-from-imbalanced-data/ 引言 不管是在学术界还是工业界,不平衡学习已经吸引了越来越多的关注,不平衡数据的场景也出现在互联网应用的方方面面,如搜索引擎的点击预测&#xff08…

CSS预处理——LESS

LESS是什么? less是一门CSS预处理语言。由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上,引入了变量、Mixin混入、运算以及函数等功能,大大简化了CSS的编写&a…

不均衡数据的处理方法

关于不均衡数据的处理方法,主要有以下几个方面: 1. 采样的方法 1.1 过采样,采集类标少的样本,达到平衡样本的目的。 方法一,简单的复制类标少的样本 方法二,生成人工样本(SMOTE方法&#xff09…

.mat,.txt,.csv 数据转换为weka中的arff格式及matlab和Weka之间相互转换格式

在RUSBoost和SMOTEBoost中提供了csv转换为arff格式的方法,详见CSVtoARFF.m http://www.mathworks.com/matlabcentral/fileexchange/37315-rusboost http://cn.mathworks.com/matlabcentral/fileexchange/37311-smoteboost function r CSVtoARFF (data, relation…

IT人不仅要提升挣钱能力,更要拓展挣钱途径

前几天我上班路上,和小区门口开车的师傅闲聊,发现他们虽然学历不高,但挣钱的途径不少,比如固定接送多位客户,然后能通过朋友圈拓展新客户,而且通过客户口口相传,也能不断拉到生意,算…