0

我有一个 10px x 765px 的图形，我重复-x，然后我有一个 20px x 20px 的重复图形，一旦页面高度超过 765px，我想拾取它。

是否有可能做到这一点？

body {
  background: #000 url('/assets/images/background_x_tile.png') repeat-x;
}

在此处输入图像描述

在此处输入图像描述

此处包含两个背景图像，一旦页面到达 765px 高度图像的末尾，我不知道如何平铺较小的图像。

试图完成这个样子：

在此处输入图像描述

4

3 回答 3

1

在标签上使用一个 bg 图像，在html标签上使用另一个body

密码笔

html {
  background-image: url(http://i.stack.imgur.com/Yowiu.png);
   background-position: 765px 0;
}

body {
background-image: url(http://i.stack.imgur.com/FtvK0.png);
  background-repeat: repeat-x;
}
于 2014-01-29T12:48:52.867 回答
1

将 20px x 20px 图像作为背景图像应用到 HTML 元素，并将 10px x 765px 图像作为背景图像到 body 元素。

如果此解决方案不能满足您的需求，您可以考虑添加一个 CSS 媒体块，例如：

@media screen and (min-height: 765px)

有关 CSS @media 块的更多信息，请点击此处：

http://css-tricks.com/css-media-queries/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.w3.org/TR/css3-mediaqueries/

于 2014-01-29T12:53:54.610 回答
-1 
background-size:cover

这不会产生您想要的效果。只需将上面的代码添加到css您应用背景的位置。

几乎给出相同的输出:)

于 2014-01-29T12:43:38.830 回答