如何制作背景尺寸:封面从左边剪掉?

Question

考虑这个简单的W3学校背景图像示例，我将其background-size更改为cover。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

如果缩小页面，您可以看到山脉图像开始从右向左剪切。我想知道我是否可以将这种效果更改为从左到右剪切？即当切割开始时，左侧首先被切断。

Answer 1

您可以使用background-position: right;将背景图像的原点设置为容器的右侧：

#example1 {
border: 2px solid black;
padding: 25px;
background: url(https://placehold.it/1000x100);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}

<div id="example1">
<h2>Hello World</h2>
<p>The background image is displayed in its original size.</p>
</div>

您还可以使用background速记属性来解决此问题：

#example1 {
border: 2px solid black;
padding: 25px;
background: url(https://placehold.it/1000x100) no-repeat right / cover;
}

<div id="example1">
<h2>Hello World</h2>
<p>The background image is displayed in its original size.</p>
</div>