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

2021-12-18 23:01:46 阅读：293 来源： 互联网

标签：vw 5px vh 模糊 filter background blur 背景图 CSS

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

代码：

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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