HTML\CSS：背景图片定位答案

【问题标题】：HTML\CSS: background image positioningHTML\CSS：背景图片定位
【发布时间】：2011-02-02 14:29:42
【问题描述】：

我知道我们可以这样定位

background:url(../images/bg.jpg) top left;

但我想这样做

将背景定位到顶部中心并将其向右移动 400 像素...如何做到这一点

【问题讨论】：

让我们等待除 Firefox 之外的其他浏览器实现 calc()，例如，我认为这在 Firefox 中可以工作：background-position: top -moz-calc(50% - 400px);。见developer.mozilla.org/en/CSS/-moz-calc

标签： html css positioning background-image margin

【解决方案1】：

目前无法使用经典的background-position 表示法来完成。

您必须使用 JavaScript 计算元素的宽度并相应地设置位置，或者在左侧给图像一些透明空间以将其推到右侧。这可能是最简单的解决方案。

【讨论】：

@JCOC 是的，如果您可以使用包装器元素，这也是一个好主意
或者一个额外的元素绝对定位在中心，边距将它推到右边。

【解决方案2】：

编辑：这在 IE 中是很顽固的，所以我添加了一些额外的信息以使其也能在那里工作。

Edit2： 还使用 Microsoft 的 SuperPreview 应用程序在 IE6 中完成这项工作。在 FF3.6 和 IE8 以及 SuperPreview 中的 IE6 测试。

使用以下 CSS 嵌套您的对象：

body {
   margin:     0px;
   padding:    0px;
   text-align: center;
}

.parentDiv {
   margin:     0 auto;
   text-align: left;
   width:      2px; /* non-zero width */
}

.childDiv {
   position: relative;
   text-align: left;
   background-image: url("../images/bg.jpg");
   left:   399px !important; /* !important is not honored by IE6 */
   left:   600px;            /* overridden in all but IE6 */
   width:  300px;
   height: 300px;
}

你会有类似这样的代码（将DOCTYPE 设置为严格很重要）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
...
<div class=parentDiv><div class=childDiv>Child Content</div></div>

根据您的图像更改 childDiv 中 width 和 height 的值。

【讨论】：

这种技术可以工作......我自己会这样做，但它不是解决方案......因为您考虑了可变页面高度和跨浏览器解决方案来调整 div 大小，特别是对于像 ie5 和特别是对于我的国家，ie6 用户占总数的 22.5%
我提供的答案适用于现代浏览器。如果您需要针对 IE5/6 的特定解决方案，您应该在问题中说明这一点。无论如何，要让它在这些浏览器中工作将是一个非常丑陋的黑客攻击。
好的，我使用 Microsoft SuperPreview 的副本在 IE6 中对此进行了测试。使用这个程序进行测试不是很灵活，但似乎达到了预期的效果。相应地更新答案。
我在 IE 5.5 和 IE 7.0 中也使用了 IETester 来确认这一点，但是我无法调整窗口大小以进行真正的验证。我可以说每个浏览器的位置完全相同。

【解决方案3】：

可以使用 background-clip 和 background-origin 来完成，但那是在未来：http://www.css3.info/preview/background-origin-and-background-clip/

包装器 DIV 或 JavaScript 应该可以做到这一点。

【讨论】：

【解决方案4】：

我会尝试使用带有定位和 z-index 的

进行操作

【讨论】：

【解决方案5】：

使用 Javascript 可能会更简单。

Pseudocode:
    Read the width of the enclosing element
    Compute its center
    Offset the center by desired amount of pixels
    Set this new value as the position of the background image

【讨论】：