Question

如下图所示：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;
}

Answer 1

您可以使用background-size属性执行此操作。 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

IE8中忽略了背景大小，但IE8只会是桌面大小，因此请将图像缩放到常规桌面大小，并使用background-size属性为现代支持的所有内容提供响应。

全屏幕背景+中心5横幅

1 个答案: