滤镜主要是用来实现图像的各种特殊效果;它在Photoshop中具有非常神奇的作用。而在CSS3中,对各种滤镜效果已经有了支持,可以做出很多效果。

css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜;而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。

CSS滤镜(filter)提供了图形特效,像模糊,锐化或元素变色;通常被用于调整图片,背景和边界的渲染。

简而言之,就是在CSS中提供了一些已经预定义的属性或函数,实现图像的模糊、变色等效果。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

CSS滤镜支持的方法(function)blur 模糊

grayscale 灰度

sepia 褐色

saturate 饱和度

hue-rotate 色相旋转

invert 反色

opacity 透明度

brightness 亮度

contrast 对比度

drop-shadow 阴影

为了实现兼容性,当然少不了前缀-webkit--webkit-filter : function (param);

随着样式表技术的不断成熟,其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们,将可以产生意想不到的效果。在操作上,用户只需要了解具体滤镜的实际效果后,就能根据实际进行微调了。

html filter 作用,css滤镜有什么作用?相关推荐

  1. html的style不起作用,css样式不起作用是什么原因?

    在写页面时,有时会发现自己写的css样式无法生效,我们该如何排查css样式无法生效?常见的css样式不起作用的原因有哪些呢?下面我们就来看一下css样式不起作用的原因. 排查css样式不起作用的方法步 ...

  2. html clear的作用,css中clear的作用是什么?

    当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...

  3. css中用wave滤镜,CSS滤镜

    本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 滤镜主要是用来实现图像的各种特殊效果.它在Photoshop中具有非常神奇的作用.所以有的Photoshop都按分类放置在菜单 ...

  4. css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...

    说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...

  5. html怎么改变图片亮度,纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...

    原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色 说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...

  6. CSS过滤器无法生效,IE8不透明度/过滤器css样式不起作用(IE8 opacity/filter css style not working)...

    IE8不透明度/过滤器css样式不起作用(IE8 opacity/filter css style not working) 我有以下风格: .LinkActionButtonDisabled { c ...

  7. 计算机底纹不起作用,CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)...

    CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11) 我有以下代码: .skills_column { padding: 5 ...

  8. canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用

    好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...

  9. 什么是CSS,有什么作用?\nCSS(Cascading Style Sheet):层叠样式表语言。\nCSS的作用是:\n修饰HTM

    什么是CSS,有什么作用?\nCSS(Cascading Style Sheet):层叠样式表语言.\nCSS的作用是:\n修饰HTML页面,修饰HTML页面张的某些元素的样式,让HTML页面更好看. ...

最新文章

  1. 常见面试之机器学习算法思想简单梳理
  2. 10一个应用阻止关机贴吧_手机该不该每天关机一次?看完才知道这么多年白用了...
  3. 小米回应有品特殊激励需放弃年终奖……外媒说,荷兰运营商KPN允许华为有限参与5G网络建设;传苹果挖角英特尔5G工程师...
  4. 从今天开始学习iOS开发(iOS 7版)-- 概论 (一)
  5. 原生js 基于canvas写一个简单的前端 截图工具
  6. target ajax,jQuery target - jquery事件
  7. 相机姿态估计(五)--DLS
  8. Cockos REAPER 6 for Mac - 强大的数字音频工作站
  9. C#学生管理系统源代码
  10. mysql 用户及权限
  11. 深度学习(花书)+ 动手学深度学习(李沐)资料链接整理
  12. java retainall_java 取交集方法retainAll
  13. java 百度经纬度 转换为 高德经纬度 谷歌
  14. 建立你的第一个vue程序
  15. gin结合endless实现热更新
  16. 死链检查工具 Xenu
  17. 情侣间常犯的7个沟通问题
  18. 一个人怎么做好社群的日常高效管理?
  19. 微信小程序实现watch监听,无需页面引入!!!
  20. 利用wine使用msoffice软件

热门文章

  1. 深拷贝与浅拷贝(mutableCopy与Copy)详解 iOS
  2. 网络安全系列之三十五 缓冲区溢出
  3. Codeforces Round #220 (Div. 2)
  4. 白话设计模式——Builder
  5. TransactionScope只要一个操作失败,它会自动回滚,Complete表示事务完成
  6. webapi同一个Controller多个函数
  7. jquery获取一个table中的一行的每个td的内容
  8. Record和PL/SQL表
  9. oracle extract()截取时间值函数
  10. ExtJs Ext.TaskMgr定时刷新数据源