Question

我在HTML页面正文中的所有其他内容中都有一个div元素。它有ID＆＃39;背景＆＃39;。

<body>
    <div id="background"></div>
    <!-- The rest of the page is below #background -->
</body>

背景有自己的div并且不仅仅是身体的一部分的原因是因为我在加载时对背景应用了一些动画，我不希望这些动画反映在内部的其他元素上体。

背景div的CSS如下所示：

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(backgrounds/moon.png) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

为了避免混淆，我删除了动画CSS，因为这不是导致问题的原因。

上述HTML和CSS的结果如下所示：

enter image description here

（您可能希望在新标签页中打开图像以查看边缘模糊更清晰）

在图像的边缘，你会看到它们模糊的地方，白色背景开始通过给它一个内部发光效果。我试图删除它，基本上使图像模糊，但保持锋利的边缘。

我非常感谢任何帮助我解决这个问题的人，因为它已经让我退了很长一段时间。我也知道有一些类似于这个的其他问题，但是我希望能让问题更清楚，我也使用不同的方法来应用背景（绝对div）。

JSFiddle：http://jsfiddle.net/nvUKT/

Answer 1

你可以像here一样切断边缘。

基本上使图像在所有面上都在视图之外（可能定义左/右/上/下或宽度和高度？），您将看不到发光边缘。

你不应该需要溢出：隐藏，因为你使用绝对定位。

修改

所以，它并不是最优雅的解决方案，但你可以做的是摆脱模糊的边缘是定义两个背景div，一个模糊，一个不。模糊的图像下方的非模糊图像将摆脱奇怪的边缘，并且不会增加HTTP请求的数量，因为它是相同的图像。

HTML

<div id="behind"></div>
<div id="background"></div>

CSS

#behind, #background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
}
#background {
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

JSFiddle

Answer 2

要在一个<div>中执行此操作，您可以使用:before和:after CSS选择器，复制背景图像，仅模糊最前面的图像。这适用于全div模糊背景图像。

.background-image:before, .background-image:after {
        background:
            url("http://placehold.it/1920x1080")
            no-repeat
            fixed
            center top;
        background-size: cover;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .background-image:before {
        z-index: -2;
    }

    .background-image:after {
        z-index: -1;
        -webkit-filter: blur(7px) brightness(0.75);
        -moz-filter: blur(7px) brightness(0.75);
        -ms-filter: blur(7px) brightness(0.75);
        -o-filter: blur(7px) brightness(0.75);
        filter: blur(7px) brightness(0.75);
    }

Answer 3

为避免重复div，您可以使图像大于其容器，并将其定位在0.0之前。

所以：

#background{
    position: absolute;
    top: -10px;
    left: -10px;
    background: url(backgrounds/moon.png) no-repeat;
    background-size: cover;
    width: 102%;
    height: 102%;

    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

Answer 4

如果要避免创建其他div，另一种选择是将void email(string emailbackup) { ... int studentID = getStudentID(); string studentEmail = getStudentEmail(); ... } int getStudentID() { int studentID; cout << "Please enter Your student I.D." << std::endl; std::cin >> studID; stringstream(studID) >> studentID; while (/*std::string::npos != studID.find_first_of("130") */ studentID != 130 /*&& studID.length() <= 6*/) { stringstream(studentID) >> studID; cout << "You must enter 130 as the first 3 digits" << std::endl; std::cin >> studID; stringstream(studID) >> studentID; } return studentID; }应用于transform: scale()元素，将#background应用于body或父元素：

overflow: hidden

JS Fiddle

模糊绝对背景，同时保持坚实的边缘

4 个答案:

修改

HTML

CSS