使用CSS

Question

在我创建的这个JSFiddle页面上展示了整个问题：http://jsfiddle.net/r480pggf/4/

我的目的是让黑匣子的背景模糊不清。黑盒子应该包含p标签内的文本。

我几乎已经解决了这个问题，但由于某些原因，如果我在黑匣子里面使用p标签，它会在黑匣子顶部产生模糊（可能有点难以看到，请仔细看看你的显示器）。如果删除了p标签，一切都按预期工作，但我想在黑盒子里随意使用p标签。

HTML

<div class="content-box">
    <div class="content-bg"></div>
    <div class="content">
        <p>Text with blurred background</p>
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
    </div>
</div>

CSS

body {
    background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    overflow: hidden;
}

.content-box {
    position: relative;
    width: 300px;
    overflow: hidden;
}

.content-bg {
    position: absolute;
    background-size: cover;
    background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.content {
    border-radius: 10px;
    z-index: 100;
    background-color: black;
    opacity: 0.7;
    color: white;
}

JS

function updateBackground() {
    var contentBox = $(".content-box");
    var bg = $(".content-bg");
    bg.css("left", -(contentBox.offset().left));
    bg.css("top", -(contentBox.offset().top));
    bg.width($(window).width());
    bg.height($(window).height());
}

$(window).resize(function() {
    updateBackground();
});

updateBackground();