Question

如何模糊部分下方的div，从而将该效果应用于该部分及其内容（希望在没有背景图像的情况下获得OSX Yosemite模糊效果）。

这是标记。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        section{
            display: table;
            position: relative;
            background: rgba(255,0,0,0.5);
            width: 300px;
            height: 100px;
        }

        section h1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
        }

        div{
            position: absolute;
            top: 30px;
            left: 10px;
            width: 300px;
            height: 100px;
            background: rgba(255,255,255,0.5);
            filter: blur(4px);
        }


    </style>
</head>
<body>


    <section>
        <h1>There is some content</h1>
    </section>

    <div></div>


</body>
</html>

Answer 1

我看到你已经filter: blur了。我也做了一些测试，但是在firefox 31中根本无法使用它。似乎text-shadow应该完成类似的事情。

JSFiddle

.blurred {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

如何使用没有背景图像的CSS 3模糊部分下方的div？

1 个答案: