Question

是否有CSS方法可以在特定位置停止重复的背景图像？

HTML：

<div class="container bgimage">
   This is the content
</div>

CSS：

.container
    {
      height:100%;
    }

.bgimage
    {
      background-image:url('bg.png');
      background-repeat:repeat;
    }

我想在位置0水平和垂直重复图像，并在重复图像到达垂直height: 400px时停止重复，就像max-height一样，但仅针对背景而不缩小{{1} DIV。

我知道如何使用渐变背景来完成此操作，但是当.container DIV甚至高于400px时，是否还有一种重复图像背景的解决方案？

CSS渐变示例：

.container

...

现在我想对图像做同样的事情，并以400px停止。

Answer 1

希望它会帮助你

.youclass:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(path/image.png) repeat-y;
}

demo

Answer 2

虽然我不知道您所要求的是否可行，但我有一个可能适合您需要的解决方案。

你可以做的是在你的容器div之外创建一个div，作为400px高重复背景。

HTML：

<div class="tile-background"></div>

<div class="container">

    Hello, Luigi.

</div>

CSS：

.container {

    z-index: 0; /* MAKES the container appear on top of other elements */
    position: absolute; /* REQUIRED for z-index */

}

.tile-background {

    /* REQUIRED FOR Z-INDEX ... positions the div in reference to the window */
    position: absolute;

    top: 0px; /* positions div's top at the top edge of the window */
    left: 0px; /* positions div's left side at the left edge of the window */

    width: 100%;
    height: 400px;

    background-image: url(bg.png);
    background-repeat: repeat;

}

以下是代码的预览：

http://jsfiddle.net/Ember_Hawk/WP5Zu/1/

基本上，您创建一个显示在所有其他元素后面的div，并且不会影响它们的位置。

如果您需要背景从容器div开始的位置开始相对于其在y轴上的位置，您只需更改“tile-background”类的“top”属性。

如果你的容器上方有一个动态变化的元素，那么如果没有一些帮助，这真的不行。

希望我帮忙！祝好运！ =）

css背景图像重复直到特定高度

2 个答案: