Question

你好，我正在尝试做一个游戏，但是我的背景图片有问题。我想更改其位置并使它同时居中。

body {
  background-image: url(rulette.png);
  background-repeat: repeat-x;
  background-position: 1900px center;
}

<body>body</body>

这不是，所以我尝试将其分成两行：

background-image: url(rulette.png);
background-repeat: repeat-x;
background-position: 1900px;
background-position: center;

发生的事情是像素位置工作正常，但位置中心不工作。所以我试图这样改变位置：

background-image: url(rulette.png);
background-repeat: repeat-x;
background-position: 1900px;
background-position: center;

现在，中心位置工作得很好，但是它会跳过像素位置。我是否在尝试做一些不可能的事情？我真的需要使它工作。您有任何想法如何更改背景像素位置并使图像居中。请注意，背景是可重复的。

调整浏览器窗口大小时，背景正在移动。我希望它保持在同一位置。

Answer 1

首先用 X轴和 Y轴填充背景位置。您应该尝试以下操作：

background-position: 50% 1900px;

Answer 2

您应该输入如下内容：

background-position: 1900px center;

因为您的代码background-position: 1900px;和background-position: center;一次仅应用一个值，然后一次覆盖另一个值。

Answer 3

由于您的问题中存在一些歧义，因此我将毫不犹豫地刺入我目前的解释，以100％的大小给出x位置和居中位置。只是我的猜测，所以您会得到所得到的。

body {
  background-size: 100%;
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");
  background-repeat: repeat-x;
  background-position-x: 1900px;
  background-position: center;
}

<body>body</body>

背景位置中心和1900px同时

3 个答案: