css - 如何在调整大小时使背景图像剪辑在左侧而不是右侧

Question

每当我调整窗口大小时，我的背景图像都会在右侧被剪切，而图像的左侧尺寸保持固定。有没有办法扭转这种行为，并使背景图像剪辑位于左侧？

header {
  width: 100%;
  height: 300px;
  background: url(http://www.miis.edu/system/files/media/sailboats_0.jpg);
}

<header></header>

我有一个 Plunkr 演示 here .

Answer 1

这可能适合也可能不适合您的需求，但您可以给出 background-position right 0 到元素，以便将背景图像定位在框的右侧/顶部。

<强> Example Here

header {
  width: 100%;
  height: 300px;
  background: url(http://www.miis.edu/system/files/media/sailboats_0.jpg);
  background-position: right 0;
}

但是，这不适用于 SVG。如果将此 CSS 应用于 SVG 图像，您需要在标记中的 SVG 元素上使用它。