2

是否有 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，例如 amax-height但仅用于背景并且不缩小.containerDIV。

.container我知道如何使用渐变背景来做到这一点，但是当DIV 甚至高于 400 像素时，是否还有重复图像背景的解决方案？

示例 CSS 渐变：

linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 400px) repeat fixed 0 0 rgba(255, 255, 255, 0)

...

现在我想对图像做同样的事情，并将其停在 400 像素。

4

2 回答 2

2

希望对你有帮助

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

演示

于 2013-11-21T18:30:34.007 回答
1

尽管我不知道您所要求的是否可行，但我有一个解决方案可以满足您的需求。

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

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”属性。

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

希望我有所帮助！祝你好运！=)

于 2013-11-21T19:59:38.370 回答