<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<section id="container">
<div id="sec1">
</div>
<div id="sec2">
</div>
</section>
</body>
</html>
CSS：
#container{
margin-right: 10em;
margin-left: 10em;
border:1px dotted black;
height: 62em;
}
#sec1{
background: url('11.png') no-repeat left fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
min-height: 62em;
color:#fff;
text-align:center;
}
#sec2{
background: url('33.png') no-repeat right fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
color:#fff;
text-align:center;
}
我的第一个背景图片位于正确的左侧位置（11.png），但是第二个背景图片根本看不到，我无法弄清楚哪里出了问题。我仍然是新手，所以我还不知道如何使用网格-因此，我将把所有内容包装在容器中。
最佳答案
第二个div没有高度。浮标可以很好地布置它们，但要给它们指定所需的高度和宽度，以便它们具有可见的尺寸。
#sec1{
background: url('11.png') no-repeat left fixed;
color:#fff;
text-align:center;
min-height: 62em;
float: left;
width: 50%;
}
#sec2{
background: url('33.png') no-repeat right fixed;
color:#fff;
text-align:center;
min-height: 20em;
float: right;
width: 50%;
}
关于css - 试图并排 float 两个背景图像，我在做什么错？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34234863/