Question

在我的页脚区域中，我设置了背景图像。问题是它没有居中。仅显示图像的某些部分。图像的右端是隐藏的。如果我裁剪图像，我可以处理这个。但我想从css处理它。

这是代码

#footer{

}

#middle-footer{
    background-image:url('img/footer-bg.gif');
    background-repeat:no-repeat;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:inherit;
    overflow:hidden;
}

<div id="footer" style="height:200px;">
    <div id="middle-footer" >
    </div>
 </div>

怎么做？

Answer 1

好的，试试吧。而不是使用background-image:使用简写和URL后使用top center。代码将是：

#footer {
    background: url('img url') top center;
}

Answer 2

只有使用现代浏览器才能调整CSS背景。所以，如果您愿意，请添加：

background-size: 90%;

完整的CSS是：

#middle-footer{
    background-image:url('img/footer-bg.gif');
    background-repeat:no-repeat;
    background-size: 90%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:inherit;
    overflow:hidden;
}

Answer 3

问题是你正在混合width: 100%与执行margin-left: auto;和margin-right: auto;的中心技巧，这将无效，因为如果宽度为100％，则边距将为{ {1}}因为盒子填满了空间，所以没有任何东西。所以我重新设计了CSS，因此它具有固定的宽度。我还在盒子中添加了一种颜色，因为我们没有要查看的图像以供参考，但需要查看该框。我还将auto的内联样式移到了CSS中，因为在CSS中看到空#footer是很奇怪的。这是一个完整的HTML示例，说明它应该如何工作。

#footer { }

图像不居中

3 个答案: