CSS3滤镜

最新推荐文章于 2023-12-26 12:02:58 发布

云杰8了

最新推荐文章于 2023-12-26 12:02:58 发布

阅读量470

点赞数 1

分类专栏： css3 css 文章标签： css

本文链接：https://blog.csdn.net/weixin_50821119/article/details/111411939

版权

css 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css3

13 篇文章 0 订阅

订阅专栏

CSS3滤镜

- Filter 函数

Filter 函数

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素(SVG filter element)。
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。或者像素px

blur(px)模糊度

1.描述
blur()该函数将高斯模糊的分辨率输入图像。radius定义了高斯函数的标准偏差值，或者屏幕上有多少变量相互融合，因此，干扰的值将产生更多的模糊。如果没有设置值，只能为0。可以指定为CSS长度，但不接受百分比值。
2. 单位
像素（px），默认值0，

brightness(%，num)亮度

单位% ，或者数值，默认值是1，0为全黑图像，>1时更亮。

contrast(%，num) 对比度

描述
contrast() 函数是可调整输入图像的浓度。值是0%的话，图像会全黑。值是 100%，图像不变。值可以超过100%，意味着会利用校正的对比度。若没有设置值，替代是1。
也就是说，值越大，颜色会越来越鲜艳。
单位
%，num ，默认值1，为0 时，图像背景变色灰色。

drop-shadow()图像后方应用投影

offset-x offset-y （需要）
offset-x指定offset-y垂直距离，其中负值将阴影放置到元素的顶部。如果两个值都为0，则阴影直接放置在元素后面。
blur-radius （可选的）
阴影的模糊半径，指定为。值越大，阴影就越大，也越模糊。如果未指定，则默认为0，从而产生清晰，不模糊的边缘。不允许有负值。
spread-radius （可选的）
阴影的扩展尺寸，指定为。正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则交替为0，阴影的大小将与输入图像相同。
color （可选的）
阴影的颜色，指定为。如果未指定，则使用color 属性的值。
例子如下

在这里插入代码片 img {
            display: block;
            margin-left: 200px;
            margin-top: 200px;
            filter: drop-shadow(0px 0px 12px #4444dd);四周都有阴影。
             filter: drop-shadow(9px 12px 12px #4444dd);
        }

grayscale()将图像转为灰度图

grayscale() 函数将改变输入图像灰度。amount的值定义了转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。在值0%到100%之间，则是效果的线性乘数。若未设置值，默认是0。

filter: grayscale(90%)
filter: grayscale(0%)

hue-rotate()改变图像的整体色调

hue-rotate() 函数在输入图像上应用色相旋转。angle一值设置图像会被调整的色环角度值。变量0deg，则图像无变化。若值未设置值，只能为0deg。该值虽然没有，超过360deg的值相当于又绕一圈。会越来越绿

filter: hue-rotate(90deg)；
filter: hue-rotate(140deg)；

invert()反转图像颜色

invert()函数反转输入图像。amount 的值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。**在值0%状语从句：100%之间，**则是效果的线性乘数。若值未设置值，默认为 0。

filter: invert(100%)

opacity()改变图像透明度

opacity() 转化图像的透明程度。amount的值定义转换的比例。值为0%则的英文完全透明，值为100%则图像无变化。在值0%状语从句：100%之间，则是效果的线性乘数。也相当于图像样本乘以数量。若值未设置，值默认是1。函数该已有与的opacity 属性很形容词：，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

filter: opacity(50%)

saturate()饱和度

saturate()函数转换图像饱和度。amount的值定义转换的比例。数值0%则是完全不饱和，转换100%则图像无变化。其他值是效果的线性乘数。超过100%则有更高的饱和度。若未设置值。，默认为 1。会越来越红

filter: saturate(200%)

sepia()将图像转为棕褐色

sepia()函数将图像转换为深褐色。amount的值定义转换的比例。值为100%则完全的英文深褐色的，值为0%图像无变化。在值0%到100%之间，值是效果的线性乘数。若未设置，值默认是0。

filter: sepia(100%)

复合写法中间空格隔开

filter: contrast(175%) brightness(3%)

所以滤镜实例如下，图片自己添加即可。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width: 33%;
    height: auto;
    float: left; 
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<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" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

云杰8了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS3滤镜

CSS3滤镜Filter 函数blur(px)模糊图像brightness(%，num)亮度contrast() 图像的对比度drop-shadow()图像后方应用投影grayscale()将图像转为灰度图hue-rotate()改变图像的整体色调invert()反转图像颜色opacity()改变图像透明度saturate()超饱和或去饱和输入的图像sepia()将图像转为棕褐色所以滤镜实例如下，图片自己添加即可。Filter 函数filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用
复制链接

扫一扫

专栏目录