Question

我想在我的网站上弹出一个 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来模糊半透明元素的背景而不是其内容？

Answer 1

<强>十月2016年更新

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

<强> Check the demo using pseudo-element

（Demo在FF v49，Chrome v53，Opera 40中测试过 - IE似乎不支持使用css或svg过滤器模糊）

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

See my demo here

我知道这是一个非常复杂的解决方案，仅限于FF（element()仅适用于具有-moz-element()属性的Mozilla），但至少过去曾some effort在webkit浏览器中实现，希望它将实现in the future。

Answer 2

您可以使用伪元素作为内容的背景，使用与背景相同的图像，但使用新的CSS3过滤器模糊。

您可以在此处看到它：http://codepen.io/jiserra/pen/JzKpx

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

Answer 3

从Safari 9.0开始，您可以使用backdrop-filter属性。

<强> 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 Developer: backdrop-filter

CanIUse

Answer 4

使用2个背景图像有一种简单而常见的技术：清晰而模糊。您将清晰图像设置为正文的背景，将模糊图像设置为容器的背景图像。必须将模糊图像设置为固定位置，并且对齐方式100％完美。我之前使用它并且它有效。

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

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

您可以在以下小提琴中看到一个有效的例子： http://jsfiddle.net/jTUjT/5/ 。尝试调整浏览器的大小，看看对齐方式永远不会失败。

如果除了Mozilla element()以外的其他浏览器仅支持CSS -moz-element()，则可以创建出色的效果。请参阅此demo with Mozilla。

Answer 5

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

#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>

如果内容的大小并不总是一致，那就不容易了。但是它有效。

Answer 6

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

Answer 7

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

<强> See demo here.

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

与CSS的背景迷离

7 个答案: