如何模糊 div（框）答案

【问题标题】：How to blur a div (box)如何模糊 div（框）
【发布时间】：2014-05-11 07:43:12
【问题描述】：

如何使用 CSS 将高斯模糊应用于包含文本的 DIV。基本上，我想要实现的是使框具有高斯模糊，但文本以正常方式。这可以做到吗？我不知道怎么做，我一直在努力，但我就是做不到。

示例：就像我的 div 不透明度：0.75 我希望我的 div 透明但具有高斯模糊，因为在背景中我有一个动态图像，所以我希望框模糊。

【问题讨论】：

我最近尝试过这个，但认为不可能。

【解决方案1】：

将以下 CSS 应用于您的块：

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

但是，此属性仅适用于现代浏览器：compatibility table

【讨论】：

效果不是我想要的。我想要的是带有文本的框的背景是透明但模糊的，而文本不是，当我输入它时，它会模糊所有内容。想看代码？我想要类似blurjs.com 的东西，比如第一个盒子。
@user3614311 链接坏了你能发张图片吗？

【解决方案2】：

如果没有额外的div 甚至更好的伪元素，我认为您无法实现您正在寻找的东西。我的建议是：

div {
  position:relative;
  width: 10em;
  height: 20em;
  padding: 1em;
}
div::before {
  content: '';
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
  z-index: -1;
}

虽然你的问题不太清楚，所以我不确定这是否是你要找的...... 笔：http://codepen.io/marczking/pen/dqxwG

【讨论】：