提问者:小点点

如何制作背景尺寸:封面从左切?


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

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

如果收缩页面,可以看到山图像开始从右向左剪切。 不知道能不能把这个效果改成从左到右剪? 即。 当切割开始时,左侧先被切断。


共1个答案

匿名用户

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

null

#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>