47

我希望在我的网站上的弹出窗口上具有Vista/7-aero-glass 风格的效果，并且它需要是动态的。只要该站点仍然可以在所有现代浏览器上运行，我就可以接受这不是跨浏览器的效果。

我的第一次尝试是使用类似的东西

#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

然而，正如我所预料的那样，这导致对话的内容变得模糊而背景保持清晰。有没有办法使用 CSS 来模糊半透明元素的背景而不是其内容？

4

7 回答 7

34

华侨城。2016 更新

由于-moz-element()除 FF 之外的其他浏览器似乎不广泛支持该属性，因此有一种更简单的技术可以在不影响容器内容的情况下应用模糊。在这种情况下，与 svg 模糊滤镜结合使用伪元素是理想的选择。

使用伪元素检查演示

（演示在 FF v49、Chrome v53、Opera 40 中进行了测试 - IE 似乎不支持使用 css 或 svg 过滤器进行模糊）

（到目前为止）在没有 js 插件的情况下在后台产生模糊效果的唯一方法是将-moz-element()属性与svg模糊过滤器结合使用。您可以将-moz-element()一个元素定义为另一个元素的背景图像。然后应用svg模糊滤镜。可选：如果您的背景fixed就位，您可以使用一些 jQuery 进行滚动。

在这里查看我的演示

我知道这是一个相当复杂的解决方案，并且仅限于 FF（element()目前仅适用于 Mozilla 的-moz-element()属性），但至少过去在 webkit 浏览器中实现了一些努力，并希望它会在未来实现。

于 2013-05-13T13:18:42.543 回答
25

在主要浏览器的最新版本中，您可以使用背景过滤器属性。

HTML

<div>backdrop blur</div>

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

或者如果您需要不支持的浏览器的不同背景颜色：

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

演示：JSFiddle

文档：Mozilla 开发者：背景过滤器

是给我的吗？：CanIUse

于 2015-08-24T16:19:56.630 回答
17

您可以使用伪元素来定位内容的背景，使用与背景相同的图像，但使用新的 CSS3 过滤器进行模糊处理。

你可以在这里看到它的作用：http: //codepen.io/jiserra/pen/JzKpx

我这样做是为了自定义选择，但我添加了模糊背景效果。

于 2013-09-02T18:28:07.757 回答
8

使用 2 个背景图像是一种简单且非常常见的技术：一个清晰的和一个模糊的。您将清晰的图像设置为主体的背景，将模糊的图像设置为容器的背景图像。模糊图像必须设置为固定定位，并且对齐是 100% 完美的。我以前用过它，它工作。

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

您可以在以下小提琴中看到一个工作示例：http: //jsfiddle.net/jTUjT/5/。尝试调整浏览器大小并确保对齐永远不会失败。

element()如果Mozilla 以外的其他浏览器仅支持 CSS ，-moz-element()您可以创建出色的效果。使用 Mozilla观看此演示。

于 2013-01-28T17:03:19.310 回答
1

使用为内容调整大小的空元素作为背景，并将内容放置在模糊元素上。

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

背景元素可以在内容元素内部，但不能相反。

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

如果内容的大小并不总是一致，这并不容易，但它确实有效。

于 2013-04-28T15:06:17.293 回答
1

你可以通过 iframe 来实现它......我做了一些东西，但我现在唯一的问题是同步这些 div 以同时滚动......这很糟糕，因为它就像你加载 2 个网站，但我发现的唯一方法......我猜你也可以使用 div 和溢出...

于 2013-07-24T01:37:55.660 回答
1

您希望它以哪种方式动态？如果想让弹窗成功映射到背景，则需要创建两个背景。它需要使用element()or-moz-element()和过滤器（对于 Firefox，使用 SVG 过滤器，filter: url(#svgBlur)因为 Firefox 还不支持-moz-filter: blur()？）。在撰写本文时，它仅适用于 Firefox。

在此处查看演示。

我仍然需要创建一个简单的演示来展示它是如何完成的。欢迎您查看源代码。

于 2013-12-15T02:59:21.927 回答