html - 带背景的页脚和带透明度的图像显示正文背景而不是页脚背景

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; }