html 滤镜兼容,CSS3 中各种滤镜介绍和兼容性说明 - 文章教程
CSS3 的过滤器是一种相当有趣的分支,允许您修改的 HTML 元素和图像模糊、亮度和更大量。在这个快速教程中,我们就去了解他们是如何去工作。
它是如何工作
只需使用 CSS,我们可以完成一些相当复杂的影响。这些应该是适用于图像和 HTML 元素,但在可预见的将来,浏览器显然会有所不同。该属性用来控制所有的这些东西是过滤器。
filter: filter(value);
虽然正如您可能期望,浏览器前缀将需要,但就目前的 -webkit-(Chrome和Safari)是唯一的浏览器引擎,支持这些属性。
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
Filtering – 过滤
有相当多的一些过滤器,所以要得到一个更好的主意,让我们看看他们分别。多个过滤器,可应用与一个空格,例如亮度和模糊
filter: blur(5px) brightness(0.5);
我不会概括下面有几个过滤器,但与现有的 CSS(不透明和阴影),可以轻松地完成这些。这里的原始图像下面我们要过滤:
我会提供的照片(第一张照片)和图片看起来应该像什么过滤器(第二张照片),你应该使用的浏览器无法看到过滤器过滤后的版本。
Blur – 模糊
有没有想过做一个高斯模糊的图像或文本只是使用 CSS 过滤器,其实你可以的做到的,模糊以像素为单位,所以你可能会做这样的事情:
filter: blur(5px);
// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
Brightness – 亮度
的亮度的测量是从零到一,1为完整的亮度(白)和0是原来的亮度。
filter: brightness(0.2);
// Browser Specific
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
Saturation – 饱和
测量使用saturate()关键字的百分比。
filter: saturate(50%);
// Browser Specific
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);
Hue Rotate – 色相旋转
这是相当不错的,它可以让你改变色调旋转(想象一个颜色,然后旋转轮)。它以度为单位。
filter: hue-rotate(20deg);
// Browser Specific
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);
Contrast – 对比
同样,测量使用的百分比。默认值是100%,0%将创建一个完全的黑色图像。任何超过100%,增加对比度!
filter: contrast(150%);
// Browser Specific
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
Invert – 倒置
你想反转图像量的度量。范围从0%到100%。现在奇怪的是,就目前而言,webkit的不支持倒置,如果他们是小于100%。
filter: invert(100%);
// Browser Specific
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
Grayscale – 灰度
同样,衡量你想量灰度图像。范围从0%到100%。
filter: grayscale(100%);
// Browser Specific
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
Sepia – 乌贼
棕褐色!Instagram的,如果你想发布的东西,我想相当有用。虽然我想你不会使用CSS。无论如何,类似灰度反转,这是你想添加棕褐色的形象金额。将是完整的棕褐色100%,0%将是初始图像。
filter: sepia(100%);
// Browser Specific
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
浏览器支持
最后不要忘了,如果浏览器不支持此这不是世界末日。大部分的时间模糊效果不会是必要的用户使用你的网站,所以你可以用它!浏览器不支持的话,就干脆什么也看不见。
html 滤镜兼容,CSS3 中各种滤镜介绍和兼容性说明 - 文章教程相关推荐
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
- html keyframes无效,CSS3 中的@keyframes介绍
语法 @keyframes animationname {keyframes-selector {css-styles;}} animationname 必需.定义动画的名称. keyframes-s ...
- js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
- IE11不兼容css3渐变属性
最近做项目发现IE9兼容css3中渐变属性,到了IE11居然反而不兼容,一开始一直用低版本的IE测试兼容性,才发现低版本IE兼容的IE11不一定兼容,后来解决方法是,在样式最前面加入backgroun ...
- css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些 发布时间:2021-04-02 17:39:08 来源:亿速云 阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
- IE8上面的旋转和透明度,利用滤镜属性去处理(兼容css3的transform和rgba())
1.关于在IE浏览器上面的一个旋转问题 IE8不支持css3的transform属性,因此在兼容ie8的时候需要用到滤镜来进行兼容 语法: 兼容c3属性的浏览器在设置旋转属性的时候: transfor ...
- 一些WPF中的滤镜特效——Effect Library
原文:一些WPF中的滤镜特效--Effect Library WPF支持类似PhotoShop的滤镜功能,称之为Effect.在.Net 4.0中,WPF就废弃了对BitMapEffect的支持,转向 ...
- 高斯滤镜模糊CSS3
http://www.cnblogs.com/fsjohnhuang/p/4127888.html#a3 高斯模糊让我想起忘了戴眼镜上街的情景*~*! 1. CSS3滤镜的实现 <style ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
最新文章
- python des解密_python实现DES加密解密方法实例详解
- GDCM:gdcm::ImageHelper的测试程序
- CSharpGL(29)初步封装Texture和Framebuffer
- html的数据类型有哪些,数据库数据类型有哪些
- 2021抖音电商生态发展报告
- python图像对比度增强图片清晰度_Python 图像对比度增强的几种方法(小结)
- 2017 Google 开发者大会终于来了!
- 近期面试了三个人之感想
- Linux core文件生成及设置 查看core文件由哪个程序生成的
- 渗透测试之信息收集(下篇)
- keystone 存储 android,KeyStone存储器架构
- 【SCENIC】Single Cell rEgulatory Network Inference and Clustering
- Java 在PPT中添加文本水印的简易方法(单一/平铺水印)
- 真正的Netflix文化
- MMA-mathematica数值求解非线性偏微分方程组
- 服务器gosht引导盘,带RAID服务器能GHOST备份吗?
- 前端调取.net core webapi 报错:“...CORS policy: Response to preflight request ...“的问题成因和解决办法。
- 张量基础2(张量乘法和对称)
- Numpy库的安装与初次使用
- 计算机Excel怎么弄迷你图,excel怎么制作迷你图 excel迷你图的使用技巧
热门文章
- WPF 禁止在文本框中输入数字
- 案例:演示pageContext对象的使用及源码分析获取属性方法
- jquery 时间相减获取天数_Js中处理日期加减天数
- 右击计算机管理出现乱码,win10系统右键菜单出现乱码的处理方案
- smallint占用几个字节_面试官问我:Object o = new Object() 占用了多少个字节?
- python3 定时任务_Python3.x:定时任务实现方式
- python 依赖包管理_依赖管理
- python上传文件进度_python实现进度条--主要用在上传下载文件
- [设计纹理素材]可爱手绘淡雅清新图案花样背景素材
- python中文字符串排序问题_Python字符串排序