使用 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();

Answer 1

棕色框顶部外部的模糊来自第一个元素的边距，如果它有一些 p 元素默认有顶部和底部边距。您需要删除此边距，例如：

.content :first-child { margin-top: 0px }

fiddle

编辑：

这是有边距的事情，还有边距的崩溃。请参阅 MDN 参考 here。相关部分是：

Parent and first/last child : If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, [...] then those margins collapse. The collapsed margin ends up outside the parent.

我在评论中采用了您的示例 fiddle 以使其显示与边框的区别：fiddle。

对于您的问题，另一种解决方案可能是为您的 .content 框提供透明边框：

.content { border: solid 1px transparent; }

fiddle.

使用 CSS 使文本框背景模糊

Making text-box background blurry with CSS

html

css

css-filters