CSS3滤镜(filter)--CSS3技术

最新推荐文章于 2022-05-02 11:17:02 发布
最新推荐文章于 2022-05-02 11:17:02 发布
阅读量199 收藏
点赞数
文章标签： 移动开发
原文链接：http://www.cnblogs.com/qikeyishu/p/7551211.html
版权

filter 属性定义了元素(通常是<img>)的可视效果，例如图片的模糊、饱和度、灰度等……个人感觉功能很强大

1、filter的语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

2、各大浏览器当前时间的支持情况（来自Can I use：http://caniuse.com/）

可以看到IE8,9,10,11、OPera Mini所有、以及Android Broswer4.3当前都是不支持

3、filter各函数

1）模糊效果blur(px)函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: blur(1px);
　　　　　　-webkit-filter: blur(1px); /*Chrome、Opera、Safari*/
　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）与效果图（Bottom）：

  

   

2）使图片变量brightness(%)函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: brightness(150%);/*亮度是原图的1.5倍，也可以是1.5，100%为原图*/
　　　　　　-webkit-filter: brightness(150%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）与效果图（Bottom）：
  

  

4）调整图像对比度Contrast(%)函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: Contrast(200%);/*对比度是原图的2倍，也可以写2；100%为原图，可以超过100%,设置更低的分辨率*/
　　　　　　-webkit-filter: Contrast(200%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）：
  
  
4）阴影效果drop-shadow（px,px,px,px）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: drop-shadow(8px 8px 6px red);
　　　　　　/*注意用空格隔开，而不是逗号;前两个属性值表示图像向右和向下偏移的像素，实际应用中可以不对阴影偏移*/
　　　　　　-webkit-filter: drop-shadow(8px 8px 6px red); /*Chrome、Opera、Safari*/
　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）：
  

5）将图像转换为灰度图像Grayscale(%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:grayscale(60%);/*范围是0%~100%*/
　　　　　　-webkit-filter: grayscale(60%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）：
 

 

6）色相旋转hue-rotate(deg)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:hue-rotate(30deg);/*色相旋转度数范围为0deg~360deg，0度为原图，360deg相当于转了一圈又转回0deg*/
　　　　　　-webkit-filter: hue-rotate(30deg); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）：

7）反转输入图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:invert(100%);/*属性值在0%和100%之间，100%为完全反转，0%则为不反转*/
　　　　　　-webkit-filter: invert(100%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）：

8）改变图像的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:opacity(50%);/*也可以写0.5，0%表示完全透明，100%为原图，完全不透明，取值在0~100%之间*/
　　　　　　-webkit-filter: opacity(50%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）

9）饱和度设置saturate(%)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:saturate(500%);/*0%~100%也可以超过100%，0%为完全不饱和，100%为原图，超过100%饱和度更高*/
　　　　　　-webkit-filter:saturate(500%); /*Chrome、Opera、Safari*/
}
</style>
</head>
<body>
　　　　<div>
　　　　　　<img src="img/test.jpg" height="300" width="480"/>
　　　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）

10）将图像转换为深褐色sepia(80%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:sepia(80%);/*取值在0%~100%之间，不能超过100%,100%完全深褐色，0%图像没有变化*/
　　　　　　-webkit-filter:sepia(80%); /*Chrome、Opera、Safari*/
}
</style>
</head>
<body>
　　　　<div>
　　　　　　<img src="img/test.jpg" height="300" width="480"/>
　　　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）

 

11）URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素  url()
filter: url(svg-url#element-id)
12）复合函数使用多个滤镜，每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
　　　　　　filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>
　　　　<div>
　　<img src="img/test.jpg" height="300" width="480"/>
　　　　</div>
</body>
</html>
原图（Top）和效果图（Bottom）

13）其他
initial：设置属性为默认值
inherit：从父元素继承该属性

本文系作者原创，转载请注明出处，感谢合作！文章难免会有不足之处，如有纰漏，非常感谢您的指出，您可追加评论或者QQ留言。

转载于:https://www.cnblogs.com/qikeyishu/p/7551211.html

weixin_30549175
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 filter(滤镜用法)
匿名丶OC
05-02 691
这里是html代码 <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p><img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300
CSS3的滤镜
weixin_62343228的博客
11-04 382
CSS3的滤镜CSS3的滤镜1.什么是滤镜2.滤镜的实现3.常用的滤镜函数（1）模糊效果（blur（））（2）图像亮度（brightness（））（3）图像的对比度（contrast（））（4）阴影效果（drop-shadow（））（5）将图像转化为灰度（grayscale（））（6）图像的反转（invert（））（7）透明度（opacity（））（8）棕褐色效果（sepia（））（9）图像的饱和度（saturate（）） CSS3的滤镜 1.什么是滤镜 CSS3滤镜是对图像等图形元素执行视觉效果的操作，如
关于 CSS3 中的 filter(滤镜) 属性
daoxiaofei的博客
10-11 913
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 CSS语法： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() 提示：若想在一个元素上应用多个滤镜，可用空格分隔 filter函数： 注意: 滤镜通常使用百分比 (如：
CSS3的filter属性
qq_44849271的博客
09-05 742
CSS——filter属性1、元素模糊2、元素亮度3、元素投影4、元素的灰色程度5、元素对比度6、元素颜色7、元素反转颜色8、元素透明程度9、元素饱和度10、元素的褐色 1、元素模糊 filter:blur(像素值) 像素值越高，元素越模糊 img{ filter:blur(10px); } /*HTML:*/ <img src="./1.jpg"></img> 效果： 2、元素亮度 filter:brightness(百分比); 100%是正常亮度，百分比越小，元素亮度
【CSS3】 filter(滤镜)属性
xyue_的博客
05-02 1883
CSS3 filter过滤、滤镜属性 总结
CSS3 filter滤镜详解
pycharm_k的博客
04-17 7767
1
用原生css实现高斯模糊、黑白等滤镜效果
angran79676765的专栏
05-28 358
—引导— 在CSS3中，有一个强大的属性，那就是filter属性，filter顾名思义就是“滤镜”的意思，用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 默认值 none 继承 none 动画支持...
CSS3 滤镜 webkit-filter详细介绍及使用方法
01-19
大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣，其实 CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，...
CSS3 Filter图片滤镜特效.zip
07-11
其中，CSS3 Filter图片滤镜特效是极具创新性的一项功能，它允许开发者对网页中的图像应用各种滤镜效果，从而实现类似照片编辑软件的功能。本资源"CSS3 Filter图片滤镜特效.zip"提供了一套基于CSS3滤镜属性的图片美化...
css3 filter滤镜属性制作图片滤镜特效
11-18
CSS3的滤镜（filter）属性是一个强大的工具，它允许开发者对网页元素，尤其是图像，进行各种视觉效果处理。这个属性引入了一套丰富的滤镜功能，使得网页设计者无需依赖额外的图形软件，就能实现类似Photoshop的效果...
CSS3悬停马赛克样式滤镜特效
07-24
首先，我们需要了解CSS3中的滤镜（Filter）属性。滤镜属性允许我们在不改变原始图像的情况下对元素应用视觉效果，如模糊、灰度、饱和度调整等。在“CSS3悬停马赛克样式滤镜特效”中，关键的滤镜是`blur()`，它用于使...
CSS3 强大的Filter详解（改变模糊度 亮度 透明度等方法）
c_qianxia5040的博客
12-15 4201
1.模糊 blur 值为length filter: blur(9px); 2.灰度 grayscale 值为0-1之间的小数 filter: grayscale(1); 3.亮度 brightness 值为0-1之间的小数 filter: brightness(2.3); 4.对比度 contrast 值为num filter: contrast(4.4); 5.饱和度 saturate 值为num filter: saturate(3.6); 6.色相旋转 hue-rota
css面试点-css3的filter详解
wfly blog
10-08 578
filter:filter属性定义了元素（通常是<img>）的可视效果（例如：模糊与饱和度）。 Filter 函数 注意:滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。 Filter 描述 none 默认值，没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少...
收集的英语资源（不断更新）
热门推荐
weixin_34163553的博客
11-25 2万+
常用谚语100句托福100句网友300句英文学习网站常用谚语1001.Health is happiness.健康就是幸福。 2.Hear all parties.兼听则明。 3.Heaven never helps the man who will not act.自己不动，叫天何用。 4.He is a fool that forgets himself.愚者忘乎所以。 5.He is a g...
CSS3 Filter的十种特效
精彩人生
02-10 1006
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧： 我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果就像是photoshop整出来的一样，其实是真是这样的，有很多效果都是类似于photoshop中的特效。不过有一点大家需
css3 filter属性
qq_41309350的博客
03-03 119
原图 <style> img{ width: 100px; height: 100px; filter: grayscale(100%); } </style> </head> <body> <img src="./img/f.PNG"/> </div> （1）灰度100% （2）褐度 filter
CSS3 Filter
未名胡的博客
11-24 540
需要说明的是，这是一篇译文，原文地址 . Image Adjustment with CSS Filter Effects 调整图片的亮度和对比度，或者将图片变成灰色或棕褐色是一种在图片编辑软件中常见的行为， 比如说 Photoshop. 但是现在已经可以利用 CSS 给网页上的图片添加相同的特性。 而这种能力来源于 Filter Effects， 实际上这是一种还处在草案阶
html中filter属性,CSS3 中filter（滤镜）属性使用详解
weixin_30335379的博客
06-04 1251
最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。使用滤镜：前言css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。浏览器支持情况：只有IE浏览器不支持fil...
CSS3 -webkit-filter 滤镜效果
最新发布
06-06
CSS3 中的 -webkit-filter 是一个用于添加滤镜效果的属性，它可以让开发者通过 CSS 代码来实现类似于照片编辑软件中的一些效果，例如模糊、变亮、变暗、灰度化等等。 具体来说，-webkit-filter 可以接受多个参数，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值