如何使用CSS移动背景图像
我想在有背景图像的桌子周围放置边框。 边框工作正常，但是当我这样做时（它是 8px 边框），背景图像会被边框截断。 我可以将背景图像向右移动 8 像素，向下移动 8 像素吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您不应手动将图像移动
8px，而应将图像锚定到内边距框（下图中的绿色）而不是边框框（黄色） ）。 这样做会将图像的左上角放置在边框内部而不是边框后面。这将使维护更容易，因为即使您更改边框宽度它仍然可以工作。
您还可以将背景的原点设置为内容框（蓝色）：
文档/简单演示 @ MDN
Rather than manually shifting the image by
8px, you should just anchor the image to the padding box (green in 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.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):
Documentation / Simple Demo @ MDN
你也可以使用一些速记。
背景：<颜色> <图片地址> <重复> <左> <顶部>对于你来说，我会想到这样的事情：
背景：透明 url（![]()
）无重复 8px 8px 滚动；you could also use some short hand.
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;您可以使用背景位置：
更多信息： https: //developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use the background-position:
More on that: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position