1. ホーム
  2. css

背景画像の位置決め、パディングの追加【重複

2023-08-12 01:16:09

質問

私はdivに背景を追加したいと思います、位置は右側中央、しかし!、画像にいくつかのパディングを持っています。 divはテキストのためにパディングを持っているので、私は背景を少しインデントしたい。おそらく、W /例で最も理にかなっています。

http://jsbin.com/umuvud/edit#javascript,html,live

ありがとうございます。

どのように解決するのですか?

回答を更新しました。

これはこの質問に対する正しい答えではないと何度もコメントされましたが、私もそう思います。 この回答が書かれた当時、IE 9 はまだ新しく (約 8 か月前)、私を含む多くの開発者が <= IE 9 用のソリューションを必要としていました。 IE 9 は、IE をサポートし始めた時です。 background-origin . しかし、もう6年半以上も前のことなので、実際のボーダーを使うよりもお勧めの最新の解決策を紹介します。IE 9 のサポートが必要な場合に備えて。 私のオリジナルの回答は、デモのスニペットの下にあります。 これは、背景画像のパディングをシミュレートするために不透明なボーダーを使用しています。

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

オリジナルの回答です。

背景と同じ色の10pxのボーダーでごまかすことができます。

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}