模糊背景

首先看一下要实现的效果：

分析一下，这个效果需要两层结构（实现的方式非常多，我就抛砖引玉一下）

1.模糊背景，那么肯定要有一层模糊的背景嘛

filter: blur(10px);模糊背景由这个属性实现

2.图片+黑色的图层 这一层

　　黑色图层由rgba实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap{
            position: relative;
            height: 200px;
            width: 100%;
            border: 1px solid;
        }
        #wrap div{
            width: 100%;
            height: 100%;
        }
        #bg{
            position: absolute;
            background-image: url(zdy.jpg);
            background-size: 100% 100%;
            filter: blur(10px);
        }
        #black{
            box-sizing: border-box;
            padding: 40px 40px;
            position: absolute;
            background-color: rgba(0,0,0,0.5);

        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="bg"></div>
    <div id="black">
       <img src="zdy.jpg" width="80px">
    </div>

</div>

<script></script>
</body>
</html>
box-sizing: border-box；是为了在设置padding的时候内容区域不溢出父元素 ，因为padding会影响可见框的大小。
如果使用margin就不需要这个属性啦。
posted @ 2019-07-02 16:09  张弎  阅读(257)  评论(0)  编辑  收藏  举报