问使用Flex Box和div的水平站点，带背景图像
EN

Stack Overflow用户

提问于 2011-06-05 14:58:24

回答 1查看 1.5K关注 0票数 0

我正在尝试为一个水平站点创建一个演示，使用由图像组成的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专家都有解决方案吗？

谢谢!

css

alignment

回答 1

Stack Overflow用户

发布于 2011-06-05 23:49:58

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6241457

复制

相似问题

问使用Flex Box和div的水平站点，带背景图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Flex Box和div的水平站点，带背景图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Flex Box和div的水平站点，带背景图像
EN