怎么让微信头像做模糊背景

实现原理:主要就是要应用好background:inherit这个属性,背景的继承。这里不能用transform这个属性,不然背景会偏移,导致达不到清晰的效果。

inherit,使用继承

<body> <div class="father"> <div class="son">Background</div> </div> </body>
<style>
        .father {
            width: 800px;
            height: 800px;
            position: relative;
            background: url("../img/7.jpg") no-repeat fixed;
            padding: 1px;
            box-sizing: border-box;
        }

        .father:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background: inherit;
            filter: blur(3px);
            z-index: 1;
        }

        .son {
            position: absolute;
            left: 40%;
            top: 30%;
            width: 200px;
            height: 200px;
            text-align: center;
            background: inherit;
            z-index: 15;
            box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
        }
    </style>

猜你喜欢

转载自blog.csdn.net/weixin_61728046/article/details/127396619