与CSS的背景迷离

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模糊滤波器结合使用伪元素是理想的.

使用伪元素检查演示

(演示在FF v49,Chrome v53,Opera 40中测试 - IE似乎不支持使用css或svg过滤器模糊)

在没有js插件的情况下,在背景中具有模糊效果的唯一方法(到目前为止)是将-moz-element()属性与svg模糊滤镜结合使用.有了-moz-element()你可以定义一个元素作为另一个元素的背景图像.然后应用svg模糊滤镜.可选:如果您的背景处于fixed适当位置,您可以使用一些jQuery进行滚动.

在这里看我的演示

我知道这是一个非常复杂的解决方案,并且仅限于FF(目前element()仅适用于Mozilla的-moz-element()属性)但至少在过去有一些努力在webkit浏览器中实现,并希望它将在未来实现.

Answer 2

从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开发人员:backdrop-filter

我可以用吗

Answer 3

您可以使用伪元素将内容的背景定位为与背景相同的图像,但使用新的CSS3过滤器会模糊.

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

我用它来定制一个选择,但我添加了模糊背景效果.

Answer 4

使用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查看此演示.