如何解决无法以绝对位置隐藏溢出
我一直在尝试在英雄区域的底部创建模糊效果。为此,模糊部分必须具有绝对的位置并具有140%的宽度,以使模糊覆盖英雄的整个底部。但是,我无法隐藏blur div的溢出。有什么办法可以隐藏所说的溢出,从而使网页的左侧没有多余的空间。
示例:https://jsfiddle.net/69sorbqd/
HTML
<body>
<header class="hero">
<ul class="menu">
</ul>
</header>
<div class="blurContain">
<div class="blur"></div>
</div>
<div id="space">
</div>
</body>
CSS
body {
background-color: #0c0c0c;
color: white;
}
.hero {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
background-image: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-
f8b1-11e8-8d89-1e61320e1d82.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
.blurContain {
overflow: hidden;
width: 100%;
}
.blur {
width: 140%;
margin-left: -20%;
height: 280px;
background-color: #0c0c0c;
position: absolute;
bottom: -180px;
filter: blur(40px);
z-index: 999;
}
#space {
padding:300px 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。