Question

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

实施例：就像我有不透明度的div：0.75我希望我的div是透明的但是有高斯模糊，因为在背景中我有一个运动图像，所以我希望盒子模糊。

Answer 1

将以下CSS应用于您的区块：

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

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

Answer 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

如何模糊div（框）

2 个答案: