cssを介してテキストの左側に画像を追加します

83

cssを介してテキストに画像を追加するにはどうすればよいですか？

私はこれを持っています：

<span class="create">Create something</span>

そして、cssを使用してその左側に16x16の画像を追加したいと思います。これは可能ですか、それともこの画像を次のように手動で追加する必要があります：

<span class="create"><img src="somewhere"/>Create something</span>

すべての場所を手動で変更する必要はないので、cssを介して変更したいと思いました。

ありがとう！

css

— クリスコンウェイ
ソース

126

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

希望する結果が得られるまで、パディングと場合によってはマージンを試してみてください。また、「background-position」を使用して背景画像の位置（* Tom Wrightにうなずく）で遊んだり、「background」を完全に定義したりすることもできます（w3へのリンク）。

— ジョン・スモック
ソース

画像の位置を指定したい場合があります。しかし、そうでなければ、良い呼びかけです。

— トム・ライト

1

行の高さが画像を垂直方向に収めるのに十分な大きさであることを確認すれば、displayプロパティをblockに設定することを避けることができます。そうしないと、[おそらく]切り取られてブロック要素になりたいと思うでしょう。

— ザックザヒューマン

最初の2行の代わりに、最適化されたオプションを使用できます。background：url（ 'somewhere.jpg'）no-repeat;

— Alexis Gamarra 2014年

1

これは、ページが画面に表示されている場合に機能しますが、ほとんどのブラウザでは、印刷時にデフォルトで背景画像が省略されるため、画像があるはずの場所に空白が残ります。これには回避策が必要です。

— ビビアン川

36

非常に簡単な方法：

.create:before {
content: url(image.png);
}

最新のすべてのブラウザとIE8 +で動作します。

編集

ただし、大規模なサイトではこれを使用しないでください。：before疑似要素は、パフォーマンスの点でひどいものです。

— tomasz86
ソース

12

次のようなものを試してください：

.create
 { 
  margin: 0px;
  padding-left: 20px;
  background-image: url('yourpic.gif');
    background-repeat: no-repeat;

}

— トレインゲーマー
ソース

ただし、繰り返し

— Traingamer 2009

1

width:2em; background-size: contain;画像のサイズを制限するために、追加も役立つ場合があります。

— ダミアングリーン

8

これはうまくいきます

.create:before{
    content: "";
    display: block;
    background: url('somewhere.jpg') no-repeat;
    width: 25px;
    height: 25px;
    float: left;
}

— ШууданчЗөгий
ソース

1

あなたはこれを詳しく説明することができます、なぜそれが機能するのか。彼のコードがそうでなかった理由など

— Yaje 2014

1

何かあるべきurl()ですか？

— ダレン・クック

@Darren Cook-皮肉なのかどうかわからないが、とにかく画像のURLをそこに配置する必要がある。

— ジョバンニ

3

@Giovanni皮肉じゃない！意図的に空白のままにされていないことを明確にするために、回答を編集しました。

— ダレン・クック

2

テキストの長さが事前にわからない場合に、常にテキストの前に背景アイコンを追加します。

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}

— トキ
ソース