如何使用 css 移动背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1175557/
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
How to shift a background image with css
提问by Ankur
I wanted to put a border around a table which has a background image. The border works fine, but when I do this (it is an 8px border) the background image gets cut off by the border. Am I able to shift the background image to start 8px to the right and 8px down?
我想在具有背景图像的桌子周围放置边框。边框工作正常，但是当我这样做时（它是一个 8 像素的边框），背景图像被边框截断了。我可以将背景图像向右移动 8 像素，向下移动 8 像素吗？
回答by Nathan
You can use the background-position:
您可以使用背景位置：
background-position: 8px 8px;
回答by schubySteve
you could also use some short hand.background: <colour> <image url> <repeat> <left> <top> <scroll>
你也可以使用一些简写。background: <colour> <image url> <repeat> <left> <top> <scroll>
for yours i'd be thinking something like:background : transparent url(<location to img>) no-repeat 8px 8px scroll;
对于你，我会想这样的事情：background : transparent url(<location to img>) no-repeat 8px 8px scroll;
回答by MarredCheese
Rather than manually shifting the image by 8px, you should just anchor the image to the padding box (greenin the diagram below) instead of the border box (yellow). Doing this will place the top-left corner of the image inside of the border instead of behind it.
而不是手动移动图像8px，您应该将图像锚定到填充框（下图中的绿色）而不是边框（黄色）。这样做会将图像的左上角放置在边框内部而不是后面。
background-origin: padding-box;
This will make maintenance easier since it will still work even if you change the border width.
这将使维护更容易，因为即使您更改边框宽度它仍然可以工作。
You can also set the background's origin to the content box (blue):
您还可以将背景的原点设置为内容框（蓝色）：
background-origin: content-box;
