无法以绝对位置隐藏溢出

问题描述

我一直在尝试在英雄区域的底部创建模糊效果。为此，模糊部分必须具有绝对的位置并具有140％的宽度，以使模糊覆盖英雄的整个底部。但是，我无法隐藏blur div的溢出。有什么办法可以隐藏所说的溢出，从而使网页的左侧没有多余的空间。

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 (将#修改为@）

blur html overflow