如何让重复背景在 Firefox 中具有正确的位置偏移？

发布于 2024-12-29 12:22:28 字数 412 浏览 3 评论 0原文

我正在 http://simplyclassicremodeling.com 上工作。文本和背景图像根据 Chrome 的需要放置； IE 有一个单独的问题我在其他地方询问过，但是在 Firefox 中，背景图像不在预期的位置（文本在其应有的位置，但正文和标题的背景图像在在他们预期的左侧和上方分别的位置）。

如何让 Firefox 将背景放在与 Chrome 相同的位置？

原文

分享到QQ

分享到微博

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

发布评论

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

面犯桃花 2025-01-05 12:22:28

Firefox 似乎没有正确解释 background-position-x 和 background-position-y，不知道这是否符合规范。只需像人们通常期望的那样使用 background-position 即可，如下所示：

body {
    background-image: url("/img/side_border.png");
    background-repeat: repeat-y;
    background-position: 240px 0;
    font-family: 'Macondo Swash Caps', cursive;
    font-size: larger;
    overflow-x: hidden;
}

header {
    background-image: url("/img/top_border.png");
    background-position: 0 160px;
    background-repeat: repeat-x;
    height: 200px;
    padding-left: 310px;
    width: 100%;
}

当我通过 Firebug 编辑更改时，这适用于 8.0.1。

Firefox doesn't seem to be interpreting background-position-x and background-position-y correctly, no idea whether that is correct or not per the specification. Just use background-position as one would normally expect, like so:

body {
    background-image: url("/img/side_border.png");
    background-repeat: repeat-y;
    background-position: 240px 0;
    font-family: 'Macondo Swash Caps', cursive;
    font-size: larger;
    overflow-x: hidden;
}

header {
    background-image: url("/img/top_border.png");
    background-position: 0 160px;
    background-repeat: repeat-x;
    height: 200px;
    padding-left: 310px;
    width: 100%;
}

This worked for 8.0.1 when I edited in the changes through Firebug.

回复收藏 0 原文

~没有更多了~