css - cssで背景画像をシフトする方法

Question

背景画像のあるテーブルの周りにボーダーを入れたかったのです。境界線は正常に機能しますが、これを行うと（8pxの境界線です）、背景画像が境界線によって切り取られます。背景画像を右に8ピクセル、下に8ピクセル開始するようにシフトできますか？

Answer 1

あなたはbackground-positionを使うことができます：

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