CSS kullanarak arka plan resmini sağdan ofset

Bir arka plan resmini, öğesinin sağından belirli sayıda piksel konumlandırmanın bir yolu var mı?

Örneğin, soldan belirli sayıda piksel (diyelim, 10) gibi bir şeyi konumlandırmak için şunu yapardım:

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

Bu CSS3 özelliğini faydalı buldum:

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

Bildiğim kadarıyla bu IE8 desteklenmiyor. En son Chrome / Firefox'ta iyi çalışıyor.

Desteklenen tarayıcılarla ilgili ayrıntılar için bkz. Kullanabilir miyim .

Kullanılan kaynak: http://tanalin.com/tr/blog/2011/09/css3-background-position/

Güncelleme :

Bu özellik artık mobil tarayıcılar da dahil olmak üzere tüm büyük tarayıcılarda desteklenmektedir.

!! CSS3 bu özelliği getirdiğinden eski yanıt

Bir arka plan resmini, öğesinin sağından belirli sayıda piksel konumlandırmanın bir yolu var mı?

Hayır!

Popüler geçici çözümler şunları içerir:

• margin-rightbunun yerine öğeye a ayarlama
• görüntünün kendisine saydam pikseller ekleme ve konumlandırma top right
• veya elemanın genişliği bilindikten sonra jQuery kullanılarak konumun hesaplanması.

En kolay çözüm yüzde kullanmaktır. Bu, piksel hassasiyeti istediğinden beri aradığınız cevap değil, ancak sağ kenar ile görüntü arasında küçük bir dolguya sahip olmak için bir şeye ihtiyacınız varsa,% 99'luk bir konum vermek genellikle yeterince iyi çalışır.

Kod:

/* 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;
}

Eski cevap: Şimdi büyük tarayıcılarda uygulanmaktadır, bu sorunun diğer cevaplarına bakın.

CSS3, background-positionfarklı başlangıç ​​noktalarıyla çalışacak şekilde özelliklerini değiştirdi . Ne yazık ki, herhangi bir büyük tarayıcıda uygulandığına dair herhangi bir kanıt bulamıyorum.

http://www.w3.org/TR/css3-background/#the-background-position Bkz. örnek 12.

background-position: right 3em bottom 10px;

Önerildiği gibi burada , bu mükemmel çalışıyor oldukça çapraz tarayıcı çözümdür:

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

Soruyu çözmek olarak işaretlenen cevapta önerilen ofsetleri belirleme CSS3 özelliği henüz tarayıcılarda çok iyi desteklenmediğinden kullandım. Örneğin

En uygun cevabı background-pozisyon için yeni dört değerli sözdizimi, ancak tüm kadar tarayıcılar bunu destekleyecek en iyi yaklaşım şu sırayla daha önceki yanıtların bir kombinasyonudur:

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+ */

Basit ama kirli bir hile, arka planı olarak kullandığınız görüntüye istediğiniz ofseti eklemektir. sürdürülemez, ancak işi bitirir.

Bu, çoğu modern tarayıcıda çalışır ... IE dışında (tarayıcı desteği) . Bu sayfa desteklenen => IE9 listelese de, testlerim buna katılmadı.

Calc () css3 özelliğini şu şekilde kullanabilirsiniz;

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

Benim için bu, sağda bir marj elde etmenin en temiz ve en mantıklı yoludur. Ayrıca border-right: 10px solid transparent;IE için kullanarak bir yedek kullanın .

Tamam, ne istediğini anlıyorsam;

DIV kabınız çağrıldı #main-containerve .my-elementiçinde. Başlamak için bunu kullanın;

#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;
}

Bu arada, bir sayfa içinde daha düşük seviyeli bir öğeye referansta bulunursanız sınıfları kullanmak daha iyi bir uygulamadır (bu nedenle yukarıdaki benim adım değişikliği olduğunuzu varsayıyorum.

Arka plan konumu için farklı kökenlere izin veren CSS3 spesifikasyonu artık Firefox 14'te destekleniyor, ancak yine de Chrome 21'de desteklenmiyor (görünüşe göre IE9 bunları kısmen destekliyor, ancak kendim test etmedim)

@MattyF'nin başvurduğu Chrome sorununa ek olarak, burada daha özlü bir özet var: http://code.google.com/p/chromium/issues/detail?id=95085

Oranlı öğeleriniz varsa şunları kullanabilirsiniz:

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

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

Bu örnekte, .validresimli sınıf .halfve standart olanın yarısı büyüklüğünde bir satır olacaktır.

Kirli, ama bir cazibe olarak çalışır ve makul yönetilebilir.

Örneğin, bir düğmeye ok / diğer simgeler eklemek için bunu kullanmak isterseniz, css sözde öğeleri kullanabilir misiniz?

Gerçekten tüm düğme için bir arka plan resmi ise, aralığa görüntüyü dahil etme eğilimindeyim ve sadece

background-position: right 0;

Ama bir düğmeye örneğin tasarlanmış bir ok eklemek zorunda kalırsanız, ben bu html eğilimindedir:

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

Ve CSS ile aşağıdakileri yapmaya eğilimlidir:

.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 selector kullanarak, sadece bu küçük simgeyi içermek için CSS kullanarak bir eleman ekliyorum. Aynı işlemi yalnızca a <i>öğesinin içine bir yayılma alanı veya öğe ekleyerek de yapabilirsiniz . Ancak, düğmelere simgeler eklemenin daha temiz bir yolu olduğunu ve çapraz tarayıcı desteklendiğini düşünüyorum.

kemanı buradan kontrol edebilirsiniz: http://codepen.io/anon/pen/PNzYzZ

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

konum olarak merkez sağ kullanın ve sonra kaydırmak için saydam bir kenarlık ekleyin?

Sabit bir genişlik öğeniz varsa ve arka plan resminizin genişliğini biliyorsanız, arka plan konumunu şu şekilde ayarlayabilirsiniz: öğenin genişliği - görüntünün genişliği - sağda istediğiniz boşluk.

Örneğin: 100 piksel genişliğinde bir öğe ve 300 piksel genişliğinde bir görüntü ile sağda 10 piksel boşluk elde etmek için 100-300-10 = -210 piksel olacak şekilde ayarlayın:

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

Ve öğenizin sol tarafında görüntünüzün en sağdaki 80 pikselini ve sağ tarafında 20 piksel boşluk elde edersiniz.

Kulağa aptalca gelebileceğini biliyorum ama bazen zaman kazandırıyor ... Görüntünün altındaki metne sahip navigasyon bağlantıları için dikey olarak (altta boşluk) kullanıyorum.

Durumunuz için geçerli olduğundan emin değilim.

benim sorunum, pencere yani tablet / mobil vb için yeniden boyutlandırıldığında sağ sınırdan aynı mesafede kalmak için arka plan resmi gerekli oldu. Benim düzeltme böyle bir yüzde kullanmaktır:

background-position: 98% 6px;

ve yerine yapışıyor.

Evet! bir arka plan resmini tarayıcının sağ tarafından sol yerine 0 piksel gibi konumlandırmak için iyi - kullanıyorum:

background-position: 100% 0px;