背景位置を 'margin-right：10px'のように割り当てる方法は？

Question

私は背景として画像を置こうとしていますが、画像を右に揃えたいが、密接に揃わないようにします。 margin-right：10pxのようなもの。イメージに余白を明示的に追加することなく、純粋なCSSでこれを行うことは可能ですか？事前に... http://jsfiddle.net/cA7Un/1/

感謝を

は、私はいくつかの試みがあったが、すべて失敗しました！

Answer 1

あなたはjsfiddleを置く例を使用するには：

私は、次の余分なスタイル宣言

：

.rss 
    { 
     background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png'); 
     background-repeat: no-repeat; 
     float: right; 
     width: 16px; 
     min-width: 16px; 
     max-width: 16px; 
     height: 16px; 
     min-height: 16px; 
     max-height: 16px; 
     margin: 10px; 
    } 

これは、同じ画像を使用していますが、それに余分なdiv要素を追加し、あなたのごマークアップ。この方法では、画像を背景画像として表示し、マージンを使用して、いつでも好きな場所から遠くに配置することができます（左手に浮かせるように変更します）。

<div class='test' style='width: 300px; height: 100%'> 
    <div class="rss"> 
    </div> 
    <p> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
     euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 

通常のマークアップより前の "rss" divの位置は、フローに影響するため、重要です。 divを相対親と絶対的に配置することでそれを行うこともできます。

最後に、 "rss"クラスに移動されたので、 ".test"クラスからバックグラウンドを削除しました。

こちらがお役に立てば幸いです。

Answer 2

あなたはパーセンテージを使用することができますが、あなたは、コンテナの幅は同じままになります知っていれば、これは唯一の良いです：

background-position: 95% center; 

そうでない場合、あなたは画像の右側にある空白の10個のピクセルを追加することができますPhotoshopのような画像エディタで。