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

【问题标题】：css background image repeat until specific heightcss背景图像重复直到特定高度
【发布时间】：2013-11-21 18:20:22
【问题描述】：

是否有 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 但仅用于背景并且不缩小.container DIV。

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

示例 CSS 渐变：

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

...

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

【问题讨论】：

请提供一个不工作的样本：D -- 我的样本工作：jsfiddle.net/JYxB6
我已经创建了一个小提琴。这是你想要的吗？ :-> jsfiddle.net/jpLUR/1
DIV 有一个height:100%，但我只希望背景图像在height 400px 处停止重复。

标签： html css background-image background-repeat

【解决方案1】：

希望对你有帮助

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

demo

【讨论】：

嗨，Venu，我认为这不是我想要的。我已经更新了我的问题，所以希望现在我的计划更容易理解。
您可以将高度添加到 .yourclass:after 并且您可以将其停止在您想要的位置，还可以为顶部位置添加值。
没错，你的答案是正确的！抱歉，但您的 jsfiddle 演示激怒了我，因为它与您在此处的答案不同。感谢您的帮助！

【解决方案2】：

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

您可以做的是在您的容器 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”属性。

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

希望我能帮上忙！祝你好运！ =)

【讨论】：