HTML\CSS：背景图片定位

发布于 2024-10-15 03:47:51 字数 142 浏览 8 评论 0原文

我知道我们可以这样定位

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

，但我想将

背景定位到顶部中心并将其向右移动 400 像素...如何才能完成

原文

i know we can position like this

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

but i want to do this

position the background to top center and move it 400 pixels to right... how can it be done

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你爱我像她 2024-10-22 03:47:51

目前无法使用经典的背景位置表示法来完成此操作。

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

回复收藏 0 原文

叹梦 2024-10-22 03:47:51

编辑：这在 IE 中很难做到，因此我添加了一些额外的信息以使其在 IE 中也能正常工作。

编辑2：

使用以下 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 设置为 strict 很重要） ):

<!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的值。

Edit: This was stubborn to do in IE, so I've added some extra information to make it work there as well.

Edit2: Also used Microsoft's SuperPreview application to make this work in IE6. Tested in FF3.6 and IE8, as well as IE6 in SuperPreview.

Use the following CSS to nest your object:

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

You would have code similar to this (it's important to set DOCTYPE to strict):

<!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>

Change the value of width and height in childDiv based on your image.

回复收藏 0 原文

九八野马 2024-10-22 03:47:51

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

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

回复收藏 0 原文

苍风燃霜 2024-10-22 03:47:51

我会尝试用

进行操作具有定位和 z 索引

回复收藏 0 原文

执笏见 2024-10-22 03:47:51

用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

It may be simpler with 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

回复收藏 0 原文

~没有更多了~