页脚与背景和图像的透明度显示身体背景而不是页脚背景

因此，我有一个有趣的设计元素，被证明是一个痛苦的看起来正确的一些HTML和CSS。我在页脚中有一张透明的图片，应该显示身体背景，但页脚也有背景图片。它应该是这样的：页脚与背景和图像的透明度显示身体背景而不是页脚背景

我最初的想法是使用负利润率是这样的： Footer

的问题是，伙伴图像越来越左边和右边的div的背景图像，即使有利润。它结束了看起来像这个： Broken Footer

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％。

来源

2014-02-09 codephobia

我可以通过对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; }

来源

2014-02-09 01:03:42 codephobia

页脚与背景和图像的透明度显示身体背景而不是页脚背景

回答

相关问题