背景画像のあるテーブルの周りに境界線を置きたいと思いました。境界線は正常に機能しますが、これを行うと(8ピクセルの境界線)、境界線によって背景画像が途切れます。背景画像をシフトして、8pxを右に、8pxを下に移動できますか?
Background-positionを使用できます:
background-position: 8px 8px;
ショートハンドを使用することもできます。
_background: <colour> <image url> <repeat> <left> <top> <scroll>
_
あなたのために、私は次のようなものを考えています:background : transparent url(<location to img>) no-repeat 8px 8px scroll;
8px
によって画像を手動でシフトするのではなく、境界ボックス(黄色)ではなく、パディングボックス(下図の緑)に画像を固定するだけです。これを行うと、画像の左上隅が境界線の後ろではなく境界線の内側に配置されます。
background-Origin: padding-box;
これにより、ボーダーの幅を変更しても機能し続けるため、メンテナンスが容易になります。
背景の原点をコンテンツボックスに設定することもできます(青):
background-Origin: content-box;