如何垂直制作 <img> 平铺？答案

【问题标题】：How to make a <img> tile vertically?如何垂直制作 <img> 平铺？
【发布时间】：2012-04-16 14:48:03
【问题描述】：

我需要让网站的背景覆盖整个屏幕，但要垂直平铺。我不能使用 HTML5。 Here is the website, 抱歉代码很乱，几年前我写了原始代码，当时我不知道如何正确组织代码。

【问题讨论】：

标签： html image background html4

【解决方案1】：

使用带有 repeat-y 选项的 CSS background-image 的问题是图像不会填满屏幕的宽度。

要使图像填充宽度并垂直平铺，请执行以下操作。我已经测试过了。

删除当前包含背景图像的<div class="background"> 块

将以下代码块添加到您页面上的<center> 元素

<center style="">
    <div class="background">
        <img src="BG/b1.jpg" />
        <img src="BG/b1.jpg" />
        <img src="BG/b1.jpg" />
    </div>

    ...rest of code

现在添加/修改以下 CSS 语句

center
{
  position:relative;
}
.background 
{
  height:100%;
  width:100%;
  min-height:800px;
  min-width:760px;
  position:absolute;
  overflow:hidden;
  left:0px;
  top:0px;
  z-index:-1;
}
.background img
{
  display:block;
  height:auto;
  width:100%;
  min-height: 800px;
  min-width:760px;
}

【讨论】：

修改页面的工作示例digitalbiscuits.co.uk/testbed/answer.htm 适用于 IE7+、Chrome 和 Firefox 10
thanks 效果很好，虽然我试图避免使用一堆标签作为背景，但我想这是没有 HTML5 的唯一方法
@EfeOzturkoglu，我的回答不需要 HTML5。仅需要 background-size，它在 Firefox 4+（3.6，如果包含 -moz-background-size）、Safari 4.1+（3.0，如果包含 -webkit-background-size）、Chrome、Opera 10+ 和 Internet Explorer 9+ 中受支持。遗憾的是，它在 IE8 及更低版本中不起作用，但根据您的情况，您可以简单地为它们提供一个后备（未调整大小的背景）。
@bfrohs - 你的回答真的很优雅和简单，但不幸的是 IE8 仍然是最常用的浏览器，而且会很长一段时间。对于我做过 SEO 的一个网站，去年的 22.5K 访问者中有 13,000 名使用的是 IE 版本。其中 11.5K 使用的是 IE8 或更低版本。您不能只为使用现代浏览器的人设计网站。
@DigitalBiscuits，这完全取决于您正在开发的网站。例如，对于我公司的网站，只有不到 25% 的用户使用 IE（

【解决方案2】：

我相信这是您正在寻找的解决方案。您也可以使用长度（例如，50px）而不是 auto 作为高度。

#background {
 background-image:url("image.png");
 background-size:100% auto;
 background-repeat:repeat-y;
}

工作示例

Horizontal Stretch + Vertical Repeat Base64 Background（在 Firefox 11 和 Chrome 中测试）

浏览器支持

Firefox 4+（如果包含 -moz-background-size，则为 3.6）
Safari 4.1+（如果包含 -webkit-background-size，则为 3.0）
铬
Opera 10+（如果包含 -o-background-size，则为 9.5）
Internet Explorer 9+（IE8 及更低版本的背景未调整大小）

【讨论】：

很好的答案，投了赞成票。如果您引入 IE Javascript 后备，也许使用现代化工具来检测 IE8 或更低版本，那么这个答案将是完美的。

【解决方案3】：

在您的 CSS 中使用 background-repeat:repeat-y 垂直重复。使用 background-repeat:repeat 垂直和水平重复。

http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS

body
{
    background-image:url('paper.gif');
    background-repeat:repeat-y;
}

【讨论】：

你不明白，我必须让它拉伸以水平填充页面，并垂直重复