全屏背景+中心5条横幅答案

【问题标题】：Full screen background + 5 banners in center全屏背景+中心5条横幅
【发布时间】：2013-11-30 23:22:03
【问题描述】：

如下图所示：http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg

我需要创建具有全屏背景的简单 HTML 页面。如果它只能与一种分辨率兼容，那将不会那么难，但我真的无法让它响应，甚至不是部分。我尝试将一些 CSS 教程用于我设法找到的此类背景，但没有任何好运。最重要的是，这个页面应该是 IE8+ 兼容的，所以我不能只使用任何 CSS 规则。

这里基本上有 3 种类型的元素： - 背景（蓝线） - 徽标（应始终位于蓝线上方，因为它在示例图像上） - 4 个带有 HTML 链接的小横幅

到目前为止，我在背景顶部合并了徽标，因此它只是一张图片，以便更容易定位。背景图片尺寸为 1920 x 1080 像素。

这是我的代码，但可能有更好的解决方案：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intro</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
<body background="index.jpg" class="bg">
<div style="outer">
<div class="centered">
  <table width="200" border="0" align="center" cellpadding="0" cellspacing="50">
    <tr>
      <td><img src="icon3.png" width="168" height="128" alt=""/></td>
      <td><img src="icon6.png" width="128" height="128" alt=""/></td>
      <td><img src="icon4.png" width="168" height="128" alt=""/></td>
      <td><img src="icon9.png" width="128" height="128" alt=""/></td>
      <td><img src="icon5.png" width="128" height="128" alt=""/></td>
    </tr>
  </table>
</div>
</div>
</body>
</html>

index.css：

@charset "utf-8";
img.bg {
  /* Set rules to fill background */
  min-height: 768px;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1920px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

.outer{
    position: relative;
}


.centered{
    position:absolute;
    top:50%;
    height:10em;
    margin:0px auto;
    left:0;
    right:0;
    text-align: center;
    display:block;
}

【问题讨论】：

请出示您的代码
我做了，请修改我的问题。

标签： html css web

【解决方案1】：

您可以使用 background-size 属性来做到这一点。 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

背景尺寸在 IE8 中被忽略，但 IE8 只会是桌面尺寸，因此请将您的图像缩放到常规桌面尺寸，并使用背景尺寸属性为所有现代支持的东西提供响应能力。

【讨论】：