滤镜背景虚化显示

最新推荐文章于 2024-02-22 17:09:11 发布

this_is_Azou

最新推荐文章于 2024-02-22 17:09:11 发布

阅读量464

点赞数

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

本文链接：https://blog.csdn.net/this_is_Azou/article/details/110733888

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

背景虚化显示

基本原理

上下两个图层，设置上图层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);
}