CSS实现页面背景图片模糊内容不模糊的方法

CSS实现页面背景图片模糊内容不模糊的方法

拾忆
2020-10-25 / 0 评论 / 465 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年04月29日,已超过91天没有更新,若内容或图片失效,请留言反馈。

原图:

实例代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .banner_bg {
                background: url(https://cdn.jsdelivr.net/gh/july-wind/img2/img2webpage.jpg);
                width: 1000px;
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-filter: blur(15px);
                -moz-filter: blur(15px);
                -o-filter: blur(15px);
                -ms-filter: blur(15px);
                filter: blur(15px);
                position: absolute;
                left: 0;
                top: 0;
                height: 500px;
            }
            .swiper-container {
                position: relative;
                top: 200px;
                left: 380px;
                color: white;
                font-size: 36px;
                font-weight: 700;
                text-shadow: 0 2px 20px rgba(0, 0, 0, .1);
            }
        </style>
    </head>
    <body>
        <div class="banner_box">
            <div class="banner_bg"></div>
            <div class="banner swiper-container">
                不模糊的内容
            </div>
        </div>
    </body>
</html>
0

评论 (0)

取消