Question

我正在努力实现磨砂玻璃效果，如下所述：https://css-tricks.com/frosting-glass-css-filters/。为此，我需要添加具有相同背景的:before元素并应用模糊效果。

这是我的HTML：

<div class="root">
  <div class="content">
    <p>Ok hello</p>
  </div>
</div>

和CSS：

.root {
  background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
  background-size: cover;
  height: 400px;
}

.content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
  padding-top: 16px;
  padding-bottom: 16px;
}

.content:before {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;

  background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.5;
  /* -webkit-filter: blur(5px); */
}

以下是笔：http://codepen.io/anon/pen/MKgbKR

我似乎无法正确定位:before元素的背景。它总是垂直移动。我试着玩这个元素的翻译，调整背景，但无济于事。在图像的右侧部分可以很容易地发现问题，特别是如果您尝试垂直调整结果文档的大小。

我是CSS的绝对初学者，所以我没有想法。我们将非常感谢您的帮助。

编辑：我想我应该澄清我的要求。无论窗口大小如何变化，我都需要将content块保持垂直居中。图像应保持居中并覆盖背景。内容永远不会改变。

Answer 1

这可能无法在代码段框中正确显示，请在您的网站上测试并使用lmk

＆＃13;

.root {
  background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
  background-size: cover;
  height: 600px;
}
.content {
  position: relative;
  top: 50%;
  height: 200px;
  transform: translateY(-50%);
  background-color: red;
}
.content:before {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  -webkit-filter: blur(5px);
}

＆＃13;

<div class="root">
  <div class="content">
    <p>Ok hello</p>
  </div>
</div>

＆＃13;

无法正确定位背景图像：元素之前

1 个答案: