首页 > 其他分享> > CSS背景图模糊，内容保持清晰

CSS背景图模糊，内容保持清晰

2021-12-18 23:01:46 作者：互联网

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景毛玻璃效果</title>

    <style>
        .container {

            width: 100%;

            height: 100vh;

            background-image: url("../static/yyqx.jpg");

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-size: cover;

            overflow: hidden;

        }



        .frosted-glass {

            width: 100%;

            height: 100vh;

            background: inherit;

            -webkit-filter: blur(5px);

            -moz-filter: blur(5px);

            -ms-filter: blur(5px);

            -o-filter: blur(5px);

            filter: blur(5px);

            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);

        }


        .content{

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            color: #fff;

        }

    </style>

</head>


<body>

    <div class="container">

        <div class="frosted-glass"></div>

        <div class="content">
            <p>如果blur直接加在.container上，.container内的内容也会模糊</p>
            <p>所以要加一个遮罩层 .frosted-glass</p>
            <p>但加了.frosted-glass以后，会占据标准文档流，所以其他内容要脱离标准文档流才能显示在毛玻璃上方</p>
        </div>

    </div>

</body>

</html>

filter(滤镜)属性，是CSS3中非常有意思的一个属性（IE不支持），主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上）
filter-function具有以下值可选：grayscale灰度、sepia褐色（具体看图）、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影
background-attachment属性用于设置背景图片定位的参照方式，它的取值有3个：
- scroll：默认值，背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
- fixed：背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。
- local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。
vh是什么单位？
vh：视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vmin 表示vh，vw中最小的那个
vmax表示vh，vw中最大的那个
- vw、vh与 % 的区别：
  % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
  vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

标签：vw,5px,vh,模糊,filter,background,blur,背景图,CSS
来源： https://blog.csdn.net/http____/article/details/122018318