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

Question

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

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

<header></header>

我这里有一个Plunkr演示.

Answer 1

这可能会或可能不适合你的需求,但你可以给background-position的right 0,以便在盒子的右/上定位背景图像元素.

这里的例子

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元素上使用它.