滤镜背景虚化显示

本文主要是介绍滤镜背景虚化显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景虚化显示

基本原理

上下两个图层，设置上图层hover时，下图层blur

注意设置上图层z-index属性，保证上图层在上方

使用滤镜filter的blur设置背景元素虚化

filter

filter 属性定义图片的可是效果，比如模糊和饱和度，是滤镜的作用。
默认值是 none，是不可继承属性

none：默认值
blur()：给图像设置高斯模糊，值为高斯函数的标准差，表示屏幕上多少个像素融合在一起，值越大越模糊；
brightness()：值为百分比的形式，为图像添加线性乘法，是图像更亮或更暗；0%全黑，100%图像无变化，大于100%，图像变亮；默认值为1；
contrast()：调整图像对比度，0%图像全黑，100%图像不变，大于100%，使用更低的对比，默认值为1；
drop-shadow()：为图像设置阴影效果，阴影在图像下面；
- offset-x，offset-y ：必须参数，设置阴影偏移量，右下为正；
- blur-radius：值越大，越模糊，阴影变得更大更淡；
- spread-radius：正值使阴影扩张变大，负值使阴影缩小，默认值为0；
- color：设置阴影颜色，如果忽略则阴影透明；
grayscale()：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate()：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert()：将图像中的颜色进行翻转，100%是完全翻转，0%则图徐昂无变化；默认值为0；
opacity()：设置图像透明度，0%完全透明，100%无变化，默认值为1，与opacity属性很相似，但是通过filter设置，一些浏览器为提升性能可以提供硬件加速；
saturate()：设置图像饱和度，0%完全不饱和，100%图像无变化，大于100%设置更高的饱和度，默认值为1；
sepia()：将图像转换为深褐色，100%为全深褐色，0%则无变化；默认值为0
url()：接受一个XML文件，设置SVG滤镜，可以包含一个锚点来指定一个具体的滤镜元素；

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background</title><link rel="stylesheet" href="day_3.css">
</head>
<body>
<div class="front"></div>
<div class="back"></div>
</body>
</html>

CSS

*{margin: 0;padding: 0;
}
/*两个图层，一个做背景，一个做前景，当：hover被激活的时候后，背景图片添加blur*/.back{position:absolute;left:0;top:0;width:100%;height:100vh;background:url("./field-of-trees-near-body-of-water-2286895.jpg") no-repeat center;transition:0.8s;
}
.front{position:absolute;width:1000px;height:800px;left:50%;top:50%;transform:translate(-50%, -50%);background-image:url("./field-of-trees-near-body-of-water-2286895.jpg");background-position:50% 50%;/*border:1px solid white;*/z-index: 1;
}
.front:hover{box-shadow:0 0 20px rgba(255,255,255,0.5)
}
.front:hover ~.back{filter:blur(10px);
}