页脚背景应该是倾斜的，但在中间有一个不常见的形状

Question

我有一个页面，页脚背景不像正常。这里应用了一个有角度的背景。主要问题是角度背景不是纯色，里面有一个形状。所以我无法通过CSS进行。在这张图片中，我显示的是页脚：

我在这里给你背景图片，以便你可以帮我查一下： Background Shape Image

假设，我想制作像这样的HTML：

<div class="main-content">Content here</div>
<div class="footer">Footer item here</div>

这将是什么CSS代码？

我试过这样：

.footer {
width:100%;
height: auto;
background: url(image_url) no-repeat;
background-size:cover;
background-position: center center;
}

但这不起作用。有没有人帮我这个？

Answer 1

由于背景始终位于底部但位于内容和页脚之间，因此最好将背景放在包含主内容和页脚的容器中，然后将位置设置为底部： / p>

.container {
    background: url("http://i.imgur.com/OTLuCgc.png") no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
    background-position: center bottom;
}

代码：https://jsfiddle.net/jennift/e3e2Lo6h/2/

Answer 2

您需要填充顶部以确保菜单保持在bg的顶部（相对于您的bg图像的大小进行数学计算）。

您还需要将位置设置为相对位置并将顶部设置为负值以使顶角与内容元素重叠而不是黑色文本（再次，相对于您的bg图像的大小进行数学运算） ）。

使用封面会让你难以理解，但我会假设你有充分的理由使用它。否则放下它并坚持使用全尺寸的bg。

如果你这样做，那么css的其余部分看起来还不错，但如果你放下盖子，你可能不得不将bg放在底部。

Answer 3

你应该将页脚分成3个div并将相同的图像放在这三个中，然后

first div -> margin-bottom:-200px;
second div -> margin-bottom:-100px;