背景画像の配置

背景画像を追加するスパンタグがあります。私はこれを行う方法はたくさんあると知っていますが、小さなpdfアイコンである背景イメージをテキストの左側の代わりにテキストの右側に移動する方法があるかどうか疑問に思っています。背景画像の配置

<span class='pdf'><a href="#">download pdf link</a></span> 

.pdf{ 
    background: url(img/sprite.png) no-repeat left bottom; 
    display:inline-block; 
    padding-top:10px; 
    padding-left:26px;

スプライトイメージにはさらにいくつかのスプライトがあり、このスプライトイメージは一番下の位置に設定されています。

出典

2011-07-19 Chapsterj

あなたのコードで何が問題なのですか、これを見てください：http://jsfiddle.net/rathoreahsan/sDajV/ –

あなたのコードは問題ありません。 –

スプライト画像を共有できますか？ –

leftをrightに変更するとどうなりますか？

background: url(img/sprite.png) no-repeat right bottom; 
padding-right:26px;

出典

2011-07-19 16:53:53 jeroen

+1 Chromeで完全に動作します。フィドルを参照してください。 http://jsfiddle.net/jasongennaro/6MPu5/ –

パーフェクト。私はバックグラウンドで考えました：スプライト内のイメージの位置を参照していましたが、要素内に配置するのではありません。私はまた、それが常に水平であると考えて＃次に垂直＃と思った。これを少し説明できますか？ – Chapsterj

@Chapsterjどういう意味ですか、私はちょうどあなたのコードで 'right'と' left'を変更したので、それはまだ水平で垂直ですか？ – jeroen

背景画像の配置には2通りの方法があります。 http://jsfiddle.net/rathoreahsan/sDajV/4/

：割合によって http://jsfiddle.net/rathoreahsan/sDajV/5/

または

はデモを参照してください

For example: 
    background: url(img/sprite.png) no-repeat 188% 93%;

属性：/左によって

は右

For example: 
    background: url(img/sprite.png) no-repeat right bottom; 
    // "right" instead of "left"

デモを参照してください。属性

出典

2011-07-19 17:19:04

答えて

関連する問題