CSSを使用して背景画像を右からオフセットする

要素の右側から特定のピクセル数だけ背景画像を配置する方法はありますか？

たとえば、何かを左から特定の数のピクセル（たとえば、10）に配置するには、次のようにします。

#myElement {
    background-position: 10px 0;
}

私はこのCSS3機能が役に立ったと感じました：

/* to position the element 10px from the right */
background-position: right 10px top;

私の知る限り、これはIE8ではサポートされていません。最新のChrome / Firefoxでは正常に動作します。

参照してくださいすることができます私の使用サポートされるブラウザの詳細については、を。

使用されたソース：http : //tanalin.com/en/blog/2011/09/css3-background-position/

更新：

この機能は現在、モバイルブラウザーを含むすべての主要なブラウザーでサポートされています。

!! CSS3がこの機能を提供して以来、時代遅れの回答

要素の右側から特定のピクセル数だけ背景画像を配置する方法はありますか？

いいえ。

一般的な回避策は次のとおりです

• 設定 margin-right代わりに要素にを
• 画像自体に透明ピクセルを追加して配置する top right
• または、要素の幅がわかった後にjQueryを使用して位置を計算します。

最も簡単な解決策は、パーセンテージを使用することです。これは、ピクセル精度を求めて以来、あなたが探していた答えとは正確には一致しませんが、右端と画像の間に小さなパディングを付ける必要がある場合は、通常、99％の位置を指定すると十分に機能します。

コード：

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

時代遅れの回答：主要なブラウザーに実装されています。この質問に対する他の回答を参照してください。

CSS3はbackground-position、異なる原点で動作するようにの仕様を変更しました。残念ながら、それが主要なブラウザーにまだ実装されているという証拠は見つかりません。

http://www.w3.org/TR/css3-background/#the-background-position 例12を参照してください。

background-position: right 3em bottom 10px;

ここで提案されているように、これは完全に機能するかなりクロスブラウザーのソリューションです。

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

質問の解決としてマークされた回答で提案されたオフセットを指定するCSS3機能は、ブラウザーではまだ十分にサポートされていないため、これを使用しました。例えば

最も適切な答えは、バックグラウンドポジションのための新たな4値の構文ですが、すべてのまで、ブラウザがそれをサポートし、あなたの最善のアプローチは、次の順序で、以前の回答の組み合わせであります：

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

単純ですが汚いトリックは、背景として使用している画像に必要なオフセットを単に追加することです。それは保守可能ではありませんが、仕事を成し遂げます。

これは、IE （ブラウザーサポート）を除いて、ほとんどの最新のブラウザーで動作します。そのページではIE9以上がサポート対象としてリストされていますが、私のテストはそれに同意していません。

次のようにcalc（）css3プロパティを使用できます。

.class_name {
    background-position: calc(100% - 10px) 50%;
}

私にとって、これは右マージンを達成するための最もクリーンで最も論理的な方法です。またborder-right: 10px solid transparent;、IEの使用のフォールバックも使用します。

Okあなたの質問があなたがこれをすることを理解しているなら;

DIVコンテナーが呼び出され#main-container、.my-elementそれがその中にあります。これを使って始めましょう。

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

ちなみに、ページ内で下位レベルの要素を参照する場合は、クラスを使用することをお勧めします（したがって、上記で私の名前が変わったと思います。

background-positionに異なるオリジンを許可するCSS3仕様は、Firefox 14ではサポートされていますが、Chrome 21ではまだサポートされていません（IE9は部分的にサポートしているようですが、私自身はテストしていません）。

@MattyFが言及したChromeの問題に加えて、ここにはより簡潔な要約があります。http：//code.google.com/p/chromium/issues/detail？id = 95085

比例要素がある場合は、次を使用できます。

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

この例で.validは、写真と.halfあり、標準のサイズの半分のサイズの行になります。

汚れているが、魅力として機能し、合理的に管理可能です。

たとえば、これを使用してボタンに矢印やその他のアイコンを追加したい場合は、css疑似要素を使用できますか？

ボタン全体の背景画像である場合は、画像に間隔を組み込んで、

background-position: right 0;

しかし、たとえばボタンにデザインされた矢印を追加する必要がある場合、私はこのhtmlを使用する傾向があります。

<a href="[url]" class="read-more">Read more</a>

また、CSSで次のことを行う傾向があります。

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

：afterセレクターを使用して、この小さなアイコンを含めるためだけにCSSを使用して要素を追加します。a <i>要素内にスパンまたは要素を追加するだけで同じことができます。しかし、これはボタンにアイコンを追加するよりクリーンな方法であり、クロスブラウザがサポートされていると思います。

ここでフィドルをチェックできます：http : //codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

位置として中央右を使用し、それをオフセットするために透明な境界線を追加しますか？

固定幅の要素があり、背景画像の幅がわかっている場合は、単にbackground-positionを次のように設定できます：要素の幅-画像の幅-右側に必要なギャップ。

たとえば、100px幅の要素と300px幅の画像の場合、右側に10pxのギャップを設けるには、100-300-10 = -210pxに設定します。

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

そして、要素の左側に画像の右端の80ピクセル、右側に20pxのギャップが表示されます。

私はそれが愚かに聞こえるかもしれませんが、時にはそれが時間を節約します...私は画像の下のテキストを持つナビゲーションリンクのためにそれを垂直方向に（下部にギャップ）使用します。

それがあなたのケースに当てはまるかどうかはわかりません。

私の問題は、ウィンドウのサイズが変更されたとき、つまりタブレット/モバイルなどの場合、背景画像が右の境界から同じ距離を保つ必要があることでした。私の修正は、次のようなパーセンテージを使用することです。

background-position: 98% 6px;

そしてそれは所定の位置にくっつきます。

はい！ブラウザの右側ではなく左側から0pxのように背景画像を配置するには、次のようにします。

background-position: 100% 0px;