我正在尝试让我的背景图像带有一个分为顶部和底部的透明覆盖层。
昨晚，在 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;">© 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;
}
最佳答案
我发现了一个解决方法。我不明白，但暂时没关系:
在白色部分的顶部添加边框:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
然后，通过更改其 z-index 使 Logo 再次出现在顶部:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
关于html - 为什么背景图片会破坏我的布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31738233/