我模糊了一个div，但我想做一切内部的重点

Question

无论如何，我通过这段代码模糊了一个div：

background: #FFFFFF;

-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
opacity: 0.4;

但是我想把那个模糊的div放在里面一些文字，而且这些停留依然保持模糊，有没有办法让文本本身只是不模糊？

Answer 1

不，但是：

在这种情况下，你可以将另一个元素放在模糊元素上。

请参阅：z-index以及position:属性。

重要提示：元素不能位于模糊元素内，只有更高的z-index。它需要在它之外，位于另一个之上，和比模糊元素高z-index。

以下是非常基本示例，使用position: absolute;：

• http://jsfiddle.net/digitalextremist/ky3Ca/3/

<强>摘录：

.unblurred {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 9;
}

有很多方法可以进行定位。上面的jsfiddle只显示了一种让你入门的方法。

Answer 2

你可以使用其他一些html元素将文本放在div上，检查这个小提琴：

http://jsfiddle.net/7PxzL/1/

<强> HTML：

<div></div>
<span>This is the Text</span>

<强> CSS：

div {
    width:100px;
    height:100px;
    background: #cccccc;
    z-index:-1px;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

span {
    position:absolute;
    top:10px;
    left:10px;
}