html背景图平铺，并且下边无限延伸

这张背景平铺并无限向下延伸

回答

是这个意思？

.main{
background: url("https://hahah.com/aaa.jpg");
    background-size: 100% 100%;
}

将图片底部做成纯色的，然后用纯色背景接续。
需要确保容器宽高比小于图片（通俗来讲，就是图片要比元素短）。
CSS 片段：

background-size: contain;
background-repeat: no-repeat;background-position: center 0;

有2种做法

将图片上的元素切图为png，然后使用background-image:url('xxx');background-color:linear-gradient(xxx)；

使用原图，然后backgroun-color设置为底部的颜色。这样页面无限延伸的时候，最底部实际是一个颜色。

html
<div class="container"></div>
css

.container {
    background: url('图片地址') 50% 0 no-repeat #f00}