CSS教程

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

本文主要是介绍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高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
这篇关于CSS背景图模糊，内容保持清晰的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航