web-dev-qa-db-ja.com

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

背景画像のあるテーブルの周りに境界線を置きたいと思いました。境界線は正常に機能しますが、これを行うと(8ピクセルの境界線)、境界線によって背景画像が途切れます。背景画像をシフトして、8pxを右に、8pxを下に移動できますか?

31
Ankur

Background-positionを使用できます:

background-position: 8px 8px;
59
Nathan

ショートハンドを使用することもできます。
_background: <colour> <image url> <repeat> <left> <top> <scroll>_

あなたのために、私は次のようなものを考えています:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

14
schubySteve

8pxによって画像を手動でシフトするのではなく、境界ボックス(黄色)ではなく、パディングボックス(下図の)に画像を固定するだけです。これを行うと、画像の左上隅が境界線の後ろではなく境界線の内側に配置されます。

background-Origin: padding-box;

これにより、ボーダーの幅を変更しても機能し続けるため、メンテナンスが容易になります。

box model

背景の原点をコンテンツボックスに設定することもできます():

background-Origin: content-box;

ドキュメント/ MDNの簡単なデモ

0
MarredCheese