0

在我的页脚区域中，我设置了背景图像。问题是它没有居中。仅显示图像的一部分。图像的右端被隐藏。如果我裁剪图像，我可以处理这个。但我想从 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>

这该怎么做？

4

3 回答 3

1

好的，试试这个。而不是background-image:使用简写，在 URL 之后使用top center. 代码将是：

#footer {
    background: url('img url') top center;
}
于 2013-01-27T06:46:59.773 回答
0

只有现代浏览器才能在 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;
}
于 2013-01-27T06:59:39.307 回答
0

问题是您将 awidth: 100%与做的居中技巧混合在一起margin-left: auto;，margin-right: auto;这将不起作用，因为如果宽度为 100%，那么auto由于框填充了空间，所以边距将毫无意义。所以我重新设计了 CSS，使它有一个固定的宽度。我还为盒子添加了一种颜色，因为我们没有图片可供参考，但需要查看盒子。我还将内联样式#footer移到 CSS 中，因为在 CSS 中看到空的样式很奇怪#footer { }。这是一个完整的 HTML 示例，说明它应该如何工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>CSS Centering Fixed</title>
    <style type="text/css">
        /*<![CDATA[*/
        #footer
        {
            height: 200px;
        }

        #middle-footer
        {
        display: block;
            background-image: url('img/footer-bg.gif');
            background-repeat: no-repeat;
            background-color: #ffffcc;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            height: inherit;
            overflow: hidden;
        }

        /*]]>*/
</style>
</head>

<body>
    <div id="footer">
        <div id="middle-footer"></div>
    </div>
</body>
</html>
于 2013-01-27T07:00:40.783 回答