背景画像の位置決め、パディングの追加【重複
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;
}
関連
-
[CSSチュートリアル】パララックススクロールの効果を完成させるCSS
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] div 内で画像を水平方向にセンタリングする
-
[解決済み】CSSで背景画像を右からオフセットさせる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[CSSチュートリアル】波動効果を生み出すCSSのアイデア
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード