css - 如何用 css 移动背景图像

Question

我想在一张有背景图片的桌子周围加上一个边框。边框效果很好，但是当我这样做时（它是一个 8 像素的边框），背景图像会被边框截断。我可以将背景图像移动到右侧开始 8px 并向下移动 8px 吗？

Answer 1

您可以使用背景位置：

background-position: 8px 8px;

更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 2

你也可以使用一些短手。
background: <colour> <image url> <repeat> <left> <top> <scroll>

对于你的，我会想：
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

而不是手动移动图像8px，您应该将图像锚定到填充框（下图中的绿色）而不是边框​​框（黄色）。这样做会将图像的左上角放置在边框内而不是在边框后面。

background-origin: padding-box;

这将使维护更容易，因为即使您更改边框宽度它仍然可以工作。

您还可以将背景的原点设置为内容框（蓝色）：

background-origin: content-box;

文档/简单演示 @ MDN