页脚有背景和图象与显示身体背景的透明度而不是步行者背景

Question

所以我有一个有趣的设计元素，通过一些HTML和CSS看起来很难看。我的页脚中有一个透明的图像，应该显示正文背景，但页脚也有背景图像。它应该是这样的：

我最初的想法是使用这样的负边距：

问题在于伙伴图像即使是边距也会得到左右div的背景图像。最终看起来像这样：

CSS：

.footer-partners { width: 100%; }
.footer-partners-left,
.footer-partners-mid,
.footer-partners-right { float: left; height: 122px; }
.footer-partners-left,
.footer-partners-right { background: url('../img/partners-bg.png'); }
.footer-partners-left { width: 50%; margin-right: -83px; }
.footer-partners-mid { width: 164px; background: url('../img/partners.png') no-repeat; overflow: hidden; text-indent: -99999px; }
.footer-partners-right { width: 50%; margin-left: -81px; }

HTML：

<div class="footer-partners clearfix">
    <div class="footer-partners-left"></div>
    <div class="footer-partners-mid"></div>
    <div class="footer-partners-right"></div>
</div>

我的想法是背景不会显示在边距上，因此负边距应该为透明图像腾出空间，也不会在那里显示背景。不幸的是，背景仍然显示在边缘。这是一个问题的唯一原因是页脚背景需要跨越页面宽度的100％。

Answer 1

我能够通过对CSS进行以下更改来解决这个问题。所需要做的就是将负边距切换到页面外部而不是中心。

.footer-partners { width: 100%; }
.footer-partners-left,
.footer-partners-mid,
.footer-partners-right { float: left; height: 122px; }
.footer-partners-left,
.footer-partners-right { width: 50%; background: url('../img/partners-bg.png'); }
.footer-partners-left { margin-left: -83px; }
.footer-partners-mid { width: 164px; background: url('../img/partners.png') no-repeat; overflow: hidden; text-indent: -99999px; }
.footer-partners-right { margin-right: -81px; }