一篇文章带你了解CSS3 滤镜(Filters)之二
source link: http://developer.51cto.com/art/202101/641844.htm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
上篇文章，我们介绍了CSS3滤镜效果的模糊效果、设置图像高度、调整图像对比度、向图像添加阴影等知识，这篇文章紧承上篇文章，我们重点介绍下CSS3滤镜效果的将图像转换为灰度、在图像上应用色相旋转、对图像应用不透明度知识。
四、向图像添加阴影
可以使用该drop-shadow()功能将阴影效果应用于Photoshop等图像。
此功能类似于该box-shadow属性。
例：
运行结果：
图片
注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像该box-shadow属性一样，但有一个例外，' inset'不允许使用关键字。
五、将图像转换为灰度
使用此grayscale()功能可以将图像转换为灰度。值100%完全是灰度。值0%保留图像不变。之间的值0%并且100%是在效果线性乘法器。如果缺少数量参数，则使用值0。
例：
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
运行效果：
图片
六、在图像上应用色相旋转
该hue-rotate()功能在图像上应用色相旋转。传递的参数定义了将调整图像样本的色环周围的度数。值0deg保留图像不变。
如果angle缺少' '参数，0deg则使用值。没有最大值，上面的值的效果会360deg回绕。
例：
运行效果：
图片
七、对图像应用不透明度
opacity()功能可用于为图像添加透明度。值0%表示是完全透明的，值100%或1保持表示图像不变。之间的值0%并且100%是在效果线性乘法器。如果缺少' amount'参数，则使用值1。此功能类似于该opacity属性。
例：
img {
-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
filter: opacity(80%);
}
运行结果：
图片
八、总结
本文基于CSS基础，通过案例，详细的讲解了 CSS3滤镜的属性的使用方法。如何去设置图像的亮度，对比度，添加相应的阴影效果、改变图像的不透明度。这几个方面通过运行后效果图的展示，让读者更直观，更简单易懂。
代码很简单，希望文章的内容能够帮助更好的学习。
Recommend
-
46
写作目的：本文主要讲解关于APP PUSH的流程、机制及相关经验，一是为了方便各位可以针对APP迅速制定PUSH消息推送方案，实现0到1的推送功能搭建，二是可以了解下PUSH流程，对各个环节针对性地提高触达率。一 APP PUSH定义与价值
-
17
为什么了解网页布局很重要？网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。 这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！ 卡片式网页布局
-
17
在实际开发中，按钮的应用是必不可少。使用 CSS 来制作按钮，可以更有新意，更有趣，也可以自定义自己想要的样式。 一、平面样式CSS按钮 平面样式按钮的使用现在非常流行，并且符合无处不...
-
16
前言 Hi，大家好，我是码农，星期八，本篇继续带来Go语言并发基础，channel如何使用。 看看Go协程如何配合channel。...
-
9
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。 按钮的作用 在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用...
-
11
一篇文章带你深入了解”B端C化”的设计理念 酷家乐用户体验设计 2021-08-22 1 评论...
-
7
好久不见，甚是想念。喜欢提笔的味道，因为当开始创作的那一刻，心中就拥有了无限的想象。为什么要写广告部分呢，虽然SEO重要，但事实上，它并不适合所有人。其一：并不是所有的网站都适合重点投入SEO，比如产品比较单一的网站、需要快速见到效果的公...
-
11
一篇文章带你了解热门版本控制系统——Git 这篇文章会介绍到关于版本控制的相关知识以及版本控制神器Git 我们可能在生活中经常会使用GitHub网页去查询一些开源的资源或者项目，GitHub就是基于Git而产生的平...
-
4
一篇文章带你了解轻量级Web服务器——Nginx简单入门 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器 在本篇中我们会简单介绍Nginx的特点，安装，相关指令使用以及配置信息和具...
-
12
一篇文章带你了解设计模式原理——UML图和软件设计原则 我们在学习过程中可能并不会关心设计模式，但一旦牵扯到项目和面试，设计模式就成了我们的短板 这篇文章并不会讲到二十三种设计模式，但...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK