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

Question

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

Answer 1

是这个意思？

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

Answer 2

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

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

Answer 3

有2种做法

png+背景颜色

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

jpg+背景颜色

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

Answer 4

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

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