模糊背景

最新推荐文章于 2022-04-01 23:17:50 发布

alca20120

最新推荐文章于 2022-04-01 23:17:50 发布

阅读量298

点赞数

原文链接：http://www.cnblogs.com/hsBK/p/11121316.html

版权

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

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

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就不需要这个属性啦。

转载于:https://www.cnblogs.com/hsBK/p/11121316.html

alca20120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模糊背景

首先看一下要实现的效果：分析一下，这个效果需要两层结构（实现的方式非常多，我就抛砖引玉一下）1.模糊背景，那么肯定要有一层模糊的背景嘛filter: blur(10px);模糊背景由这个属性实现2.图片+黑色的图层这一层　　黑色图层由rgba实现<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫