css3完成情况模糊不清的3种方法(小结)

日期:2021-02-27 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

1、一般情况模糊不清

编码:

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*情况模糊不清*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            filter: blur(2px);
            z-index: 1;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(⑸0%, ⑸0%);
            width: 200px;
            height: 200px;
            text-align: center;
            z-index: 2;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">情况模糊不清</div>
    </div>
</body>

实际效果以下所示:

这样写会使全部div的子孙后代模糊不清而且还会出現白边,致使网页页面十分不美观大方,要想处理这个难题,大家可使用伪元素,由于伪元素的模糊不清度不容易被父元素的子代承继。

编码:

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*情况模糊不清*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .bg:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /* 从父元素承继 background 特性的设定 */
            background: inherit;
            filter: blur(2px);
            z-index: 2;
        }


        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(⑸0%, ⑸0%);
            width: 200px;
            height: 200px;
            text-align: center;
            z-index: 3;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">情况模糊不清</div>
    </div>
</body>

实际效果以下所示:

2、情况部分模糊不清

上1个实际效果会了以后,部分模糊不清实际效果就较为简易了。

编码:

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*情况模糊不清*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(⑸0%, ⑸0%);
            width: 200px;
            height: 200px;
            background: inherit;
            z-index: 2;
        }

        .content:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: inherit;
            filter: blur(15px);
            /*以便模糊不清更显著,调高模糊不清度*/
            z-index: 3;
        }

        .content>div {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 4;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">
            <div>情况部分模糊不清</div>
        </div>
    </div>
</body>

实际效果以下图所示:

3、情况部分清楚

编码:

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*情况模糊不清*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .bg:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: inherit;
            filter: blur(5px);
            z-index: 2;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(⑸0%, ⑸0%);
            width: 200px;
            line-height: 200px;
            text-align: center;
            background: inherit;
            z-index: 3;
            box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">
            <div>情况部分清楚</div>
        </div>
    </div>
</body>

实际效果以下图所示:

到此这篇有关css3完成情况模糊不清的3种方法的文章内容就详细介绍到这了,更多有关css3情况模糊不清內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:根据HTML5的WebSocket的案例编码 返回下一篇:没有了