目录
(2)、同一个元素使用多个滤镜效果,只需要将每个滤镜函数使用空格分隔
(3)、不仅仅是图像,任何 HTML 元素都可以使用滤镜效果,例如文本、视频等都可以使用滤镜来美化
前言
滤镜这个词我们不陌生,最常见的就是相机中的滤镜或者说 PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中,我们无需借助任何软件也可以实现很多种滤镜效果,例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外,通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。
一、什么是滤镜
对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。
二、滤镜的实现---filter属性
1、CSS语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
2、常用的滤镜函数
滤镜 | 描述 |
---|---|
none | 默认值。规定无效果。 |
blur(px) | 对图像应用模糊效果。值越大图像越模糊。 如果为指定值,则使用 0。 |
brightness(%) | 调整图像的亮度。
|
contrast(%) | 调整图像的对比度。
|
drop-shadow(h-shadow v-shadow blur spread color) | 对图像应用阴影效果。 可能的值:
blur -可选。这是第三个值,阴影的模糊半径,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。 spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。 注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。 color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。 这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果: filter: drop-shadow(8px 8px 10px red); 提示:这个滤镜类似 box-shadow 属性。 |
grayscale(%) | 将图像转换 |