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

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 但只有用于背景并且不缩小 .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)

...

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

Answer 1

希望对你有帮助

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

demo