更改背景图像重复文件

Question

我想知道当旧图像用完时是否可以更改背景图像重复的文件。

那么，如果将 image01.jpg 设置为第一个背景图像，当它垂直用完时，image02.jpq 将被添加为背景图像以完成页面？

这可能是一个直接的“不”，没关系，我只是想知道

Answer 1

使用 CSS3，您可以拥有多个背景。您可以为它们中的每一个指定一个background-repeat。 所有主流浏览器均支持，IE8 及更早版本除外。

http://www.css3.info/preview/multiple-backgrounds/

Answer 2

如果您愿意向文件添加更多标记，CSS 中总有解决方案。最好的办法是用一个包含 div 来包装第一个图像所在的元素，并在第一个图像用完时使用您希望显示的背景。像这样：

HTML:

<div class="container"><span class="image"></span></div>

CSS:

.container { 
  background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
  width: 200px; /* The maximum width */
  /* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}

.image { 
  background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}

当然，您也可以随时将 替换为实际图像。

Answer 3

不要忘记 HTML 也是一个元素。

html {/*insert tiling background image*/}
body {/*insert normal background image*/}

正文背景将位于平铺 html 背景之上。适用于所有浏览器，不需要额外的标记。