DIV 基于布局 - 相对于屏幕的背景和按钮

Question

我只是在处理一个简单的 HTML 页面，但仍在努力处理 div。计划是：全屏背景和底部相邻的四个水平按钮。这些按钮当前映射到背景图像 - 因此我可以只添加四个不可见层 (divs) 和一些 hrefs。否则我会手动将它们（以四个单独的 jpg 格式）添加到底部...

但是，我希望整个站点（无边界）向上和向下缩放以适应可变的屏幕分辨率。因此 divs/images 的大小也应该均匀缩放并保持其位置。

到目前为止我得到了什么：

 body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
 }
 .background {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }
 img {
   height: auto;
   width: auto;
   min-width: 100%;
   min-height: 100%;
 }

<body>

  <div class="background">
    <div class="img">
      <img src="background.jpg">
    </div>
  </div>

</body>

此时我只设置了背景：它在具有绝对定位的背景容器中的 img-div 中。

我现在如何添加四个按钮以固定在背景底部，并在屏幕分辨率发生变化时保持其相对大小和位置？

:)

Answer 1

将按钮图片从背景图片中取出，body规则设置如下（带background-image），在底部添加一个div，把按钮放在那里（我选择的是DIVs with background - 按钮的图像，当然你也可以使用 <button> 标签。根据需要调整 "bottom" 和按钮高度以及按钮边距：

CSS

body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: url(background.jpg) center center fixed;
   background-size: cover
 }
 .bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 50px;
   width: 100%;
   text-align: center;
 }
.button {
  display: inline-block;
  width: 80px;
  height: 50px;
  margin: 10px;
 }
.button1 {
   background: url(button1.jpg) center center fixed;
   background-size: cover
}
.button2 {
   background: url(button2.jpg) center center fixed;
   background-size: cover
}
.button3 {
   background: url(button3.jpg) center center fixed;
   background-size: cover
}
.button4 {
   background: url(button4.jpg) center center fixed;
   background-size: cover
}

HTML:

<body>
<div class="content">
   (your content)
</div>
  <div class="bottom">
   <div class="button button1">(button text 1...)</div>
   <div class="button button2">(button text 2...)</div>
   <div class="button button3">(button text 3...)</div>
   <div class="button button4">(button text 4...)</div>
  </div>
</body>

Answer 2

感谢您的快速帮助！

到目前为止代码看起来不错。但是我仍然有问题，当我提高或降低屏幕分辨率时，按钮会改变其大小。有没有办法给它们相对于整个屏幕的固定尺寸？ "buttonX" 应该总是有 x% 的屏幕宽度和 x% 的高度......我不想要实际的可见定位 resp。分辨率更改时更改的边距：/

非常感谢！

DIV 基于布局 - 相对于屏幕的背景和按钮

DIV based layout - bg and buttons relative to screen

html

css

background

css-position