Html 使用 CSS 裁剪背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7738413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Crop background-image using CSS
提问by jcrowson
I have a background-image on the body tag which is around 500px high. This is fine for the index page, however on other pages it does not look right. I want to be able to crop the background-image on other pages to around 300px high, but still using the background-image in the body tag.
我在 body 标签上有一个背景图像，大约 500px 高。这对于索引页面来说很好，但是在其他页面上它看起来不正确。我希望能够将其他页面上的背景图像裁剪到 300 像素左右的高度，但仍然在正文标签中使用背景图像。
Is this possible using just CSS?
这可以仅使用 CSS 吗？
采纳答案by Alistair Laing
回答by Max Oriola
Make bg image 300px height, not crop, but scale:
使 bg 图像高度为 300 像素，而不是裁剪，而是缩放：
background-size: auto 300px;
But you can't crop to an area smaller than the tag where background is set. You have to write a tag inside with the desired height set bagground there and then crop:
但是您不能裁剪到比设置背景的标签更小的区域。你必须在里面写一个标签，在那里设置所需的高度，然后裁剪：
background-size: cover;
回答by Santana6.35
Perhaps something like background-origin and background-clip could also help you
也许像 background-origin 和 background-clip 这样的东西也可以帮助你
