Question

我尝试重现这种磨砂玻璃效果（frosted glass，codepen）。

我的问题是，我无法将模糊区域定位。它总是略微向右移动（见jsfiddle）。

<!doctype html>
<head>

  <style>
    html, body, .glass {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    body {
        background-image: url('pelican.jpg');
        background-size: cover;
    }
    .glass::before {
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('pelican.jpg');
        -webkit-filter: blur(5px);
        background-size: cover;
        content: ' ';
        opacity: 0.4;
    }
    .glass {
        background-color: white;
    }
    .glass.down {
        transform: translateY(100%) translateY(-20rem);
    }
    .glass.down::before {
        transform: translateY(-100%) translateY(20rem);
    }
    .glass.up, .glass.up::before {
        transform: translateY(0);
    }
  </style>

  </head>
  <body>

    <article class="glass down">
      <h1>Pelican</h1>
      <p>additional content...</p>
    </article>

  </body>
</html>

我很确定这只是我在这里遗漏的一些细节，但我还是找不到它。

Answer 1

你的身体有遗传边缘。改变这应该可以解决你的问题

http://jsfiddle.net/4sf5cmnq/

body {  margin: 0; }

:: before - 元素不在位置

1 个答案: