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

2021/12/18 23:20:32

本文主要是介绍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背景图模糊,内容保持清晰的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程