Question

我们目前正在尝试使用透明的黑色png作为叠加层的图像，为漂亮的盒子叠加层添加模糊效果。

我之前没有使用过这个CSS3规则，但我希望有人知道解释所需的知识。

请查看此链接，然后点击图片，它现在正在精美的盒子中打开。我们想让背景模糊。

http://develop.ekenhalsan.se/shop/halsokontroller/9-haelsokontroll-a.html

任何帮助都非常欢迎：）

Answer 1

是的，这些都是很好的信息 - 我已经看过其中的一些，并且我详细地尝试了它们。真正的问题是将模糊添加到叠加层本身 - 带有透明度的png中的图像。不像这里的图像 - 我们希望第二张图像上的内容（页面）在磨砂/模糊后面。我想需要另外一个div层，但我们不知道如何实现这个......

What we want:)

What we don´t want

享受你的一切：）

Answer 2

这种效果通常被称为磨砂玻璃。 css-tricks有一个很好的例子。

https://css-tricks.com/frosting-glass-css-filters/

- 编辑 -

投票赞成仅链接答案。所以，添加了一些进一步的解释

<强> Codepen https://codepen.io/maneesh/pen/oLxOov

<强> HTML

<div class="container is-blur">
  <h1>Hello</h1>
  <p>Background page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="overlay">
    <div class="fancybox">
      Your fancy box content
    </div>
</div>

<强> CSS

.container {
  position: relative;
}

.container.is-blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.content {
  font-size: 1.5rem;
  line-height: 2rem;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
  filter: blur(5px);
}

.fancybox {
  width: 200px;
  margin: 0 auto;
  top: 200px;
  position: relative;
  background-color: #fff;
  padding: 30px;
}

抱歉Lorem ipsum。

注意

IE尚不支持
过滤器。结帐http://caniuse.com/#feat=css-filters

fyi：-ms-filter不适用于IE。

要进一步了解过滤器，请查看MDN文档 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

添加模糊到fancybox而不是黑暗昏暗

2 个答案: