英文:
Crop background image left and right
问题
我需要在div上应用背景图片，并且需要裁剪背景图片左右各50像素，但仍然希望以100%宽度显示，以填充整个屏幕宽度。我该如何做？
英文:
I am applying a background image to a div:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
background: white url("https://placekitten.com/1000/1000") no-repeat left top / 100% auto;
}
<!-- language: lang-html -->
<div>
<p>Some text ...<p>
</div>
<!-- end snippet -->
I need to crop 50 pixels left and right of the background image.
But I still want to display it with a 100% width to fill the entire screen width.
How can I do this?
答案1
得分: 1
你可以通过使用"calc(100% + 100px)"来将图像的大小增加100像素，并通过将其位置设置为-50px向左裁剪图像。
div {
min-height: 200px;
min-width: 200px;
background: white url("https://placekitten.com/1000/1000") no-repeat -50px top / calc(100% + 100px) auto;
}
<div>
<p>一些文本 ...</p>
</div>
英文:
You could add 100 pixel to the size of the image with "calc(100% + 100px)" and crop the image by positioning it -50px to the left.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
div {
min-height: 200px;
min-width: 200px;
background: white url("https://placekitten.com/1000/1000") no-repeat -50px top / calc(100% + 100px) auto;
}
<!-- language: lang-html -->
<div>
<p>Some text ...<p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论