Question

我正在尝试使用透明叠加层将背景图像分割为顶部和底部。

Lastnight，在SO Chat中，我试图为这些人提供JSFiddle，但在发布代码之后，JSFiddle无法正确地重现布局。所以这就是所期望的效果：

（请注意，这是手绘的，因此您无法看到背景图片）：

您可以看到该页面应水平分割。蓝色部分应为50％高，白色部分应为50％高。中心有徽标。但是，当我添加背景图像时，白色部分会被按下，如下所示：

（注意你仍然看不到背景图片，因为它是手绘的）：

将背景图片添加到html元素，body元素或任何子容器都会导致白色div在其顶部被切断或向下推，蓝色部分的底部边缘和白色部分的顶部边缘之间的间隙。

如何让背景图像停止影响文档流？我不认为CSS背景图片会影响布局吗？

这是我的代码：

<!doctype html>
<html lang="en-us">
    <head>
        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Home | Hmmm</title>

        <link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
        <link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
    </head>
    <body>
        <header>
            <img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
            <img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
        </header>
        <div id="main">
            <footer>
                <p style="margin-top: 100px; text-align: center; color: white;">&copy; Hmmm 2015</p>
            </footer>
        </div>
    </body>
</html>


* {
    margin: 0;
    padding: 0;
    outline: none;
    outline: 0;
    border: none;
    border: 0;

    font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}

html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body
{
    width: 100%;
    height: 100%;
    overflow: hidden;

    background-image: url('../Images/Backgrounds/JWSSB.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

header
{
    width: 100%;
    height: 50%;

    background-color: #2695D7;

    opacity: 0.8;
}

#main
{
    width: 100%;
    height: 50%;
    background-color: white;
    opacity: 0.8;
}

#key
{
    float: right;
}

#logo
{
    text-align: center;

    margin: 0 auto;

    position: absolute;
    right: calc(100% / 2 - 176px / 2);
    bottom: calc(100% / 2 - 100px / 2);
}

#sections
{
    width: 100%;
    height: auto;
}

.section
{
    width: calc(100% / 3);
    height: auto;
    float: left;
    text-align: center;
    font-size: 10pt;
}

Answer 1

将CSS更改为：

body {

    height: 100vh
    overflow: hidden;
    background-image: url(...image...);
    background-repeat: no-repeat;
    background-size: cover;
}
#main
{
    width: 100%;
    height: 50%;
    background-color: white;
    opacity: 0.8;
    display: inline-block;
}

Answer 2

我发现了一种解决方法。我不明白，但现在

在白色部分的顶部添加边框：

#main
{
    height: 50%;
    background-color: white;
    opacity: 0.8;

    border-top: 0.1px solid white;
    z-index: -100;
}

然后，通过更改其z-index使徽标再次显示在顶部：

#logo
{
    text-align: center;

    margin: 0 auto;

    position: absolute;
    right: calc(100% / 2 - 176px / 2);
    bottom: calc(100% / 2 - 100px / 2);

    z-index: 1000;
}

Answer 3

我不确定这种方式对你是否合适，但仍然如此。 Link to jsfiddle

HTML：

<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>

的CSS：

html, body {
    height: 100%;
    width: 100%;
}
.top {
    background: cyan;
    height: 50%;
}
.bottom {
    background: grey;
    height: 50%;
}
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -128px 0 0 -128px;
}

我更喜欢使用计算方法。如果您知道徽标的大小（将其放在中间，带有负边距），这是更好的方法

为什么背景图片会破坏我的布局？

3 个答案: