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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<header></header>

＆＃13;

＆＃13;

＆＃13;

我有一个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元素上使用它。