考虑这个简单的W3学校背景图像示例,我将它的background-size
更改为cover
。
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
如果收缩页面,可以看到山图像开始从右向左剪切。 不知道能不能把这个效果改成从左到右剪? 即。 当切割开始时,左侧先被切断。
您可以使用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>