Question

我正在尝试使用由图像作为占位符的Flex Box创建水平站点的演示。我正在尝试使用div和背景图像。我希望div可以垂直自动缩放到窗口的大小，但是适合背景图像的宽度。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>CSS 3 horizontal site demo</title>
  <style type="text/css">
    .main {
      display: box;
      display: -moz-box;
      display: -webkit-box;
    }
    .panels {
      background-repeat:no-repeat;
      background-position:center top;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;    }
    #panel-1 {
      background-image: url(scen1.png);
    }
    #panel-2 {
      background-image: url(scene2.png);
    }
    #panel-3 {
      background-image: url(scene3.png);
    }
  </style>
</head>
<body>
<div class="main">
<div id="panel-1" class="panels"><h1>First Panel</h1></div>
<div id="panel-2" class="panels"><h1>Second Panel</h1></div>
<div id="panel-3" class="panels"><h1>Third Panel</h1></div>
</div>
</body>
</html>

相反，图像正在填充内容的大小。任何CSS3专家都有解决方案吗？

谢谢！

Answer 1

绝对定位并指定顶部和底部：

 .main {
      display: box;
      display: -moz-box;
      display: -webkit-box;
      position: absolute;
      top: 0;
      bottom: 0;
    }

使用Flexbox＆amp; amp; div与/ background-image

1 个答案: