javascript - 如何使用javascript动态居中在x轴上重复的图像？

Question

我有一个宽度为 1500 像素并在 x 轴上重复的背景图像。无论用户的视口宽度如何，我都想动态居中该图像，以便图像的中心始终位于屏幕中间？

我怎样才能用 JavaScript 做到这一点？

Answer 1

你不应该为此需要 JavaScript，CSS 会（或应该）做得很好：

background-position: center center;
background-repeat: repeat-x;

该行将确保图像始终位于元素的中心，并且从该元素的中心开始重复。有关背景位置的更多信息，请点击此处。

Answer 2

也许我误解了这里的问题，但我相信你可以只用 CSS 做到这一点。

.container {
  background: url('path/to/image') repeat-x 50% 0;
}

你是这么想的吗？