CSS arka plan resmini x piksel sağdan mı konumlandırıyorsunuz?

Cevabın hayır olduğunu düşünüyorum, ancak CSS ile bir arka plan resmini konumlandırabilir, böylece sağdan sabit bir miktarda piksel olacak şekilde?

background-positionX ve y değerlerini ayarlarsam , sırasıyla soldan ve üstten yalnızca sabit piksel ayarlamaları yapar gibi görünüyor.

background-position: right 30px center;

Çoğu tarayıcıda çalışır. Tam liste için bkz . Http://caniuse.com/#feat=css-background-offsets .

Daha fazla bilgi: http://www.w3.org/TR/css3-background/#the-background-position

Özniteliği bordersağdan uzunluk olarak kullanmak mümkündür

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

Tek yolu var, ancak her tarayıcıda desteklenmiyor ( buradaki kapsama bakın )

element {
  background-position : calc(100% - 10px) 0;
}

Her modern tarayıcıda çalışır , ancak IE9 çöküyor olabilir . Ayrıca = <IE8 için kapsam yok.

Bildiğim kadarıyla, CSS spesifikasyonu elbette CSS ifadeleri dışında tam olarak sorduğunuz şeyi sağlamaz. İfadeler veya Javascript kullanmak istemediğiniz varsayımıyla çalışarak, üç hackish çözümü görüyorum:

• Emin olun arka plan görüntüsü (en azından genişliği) kabın boyutu ve grupla eşleşen background-repeat: repeatveya repeat-xsadece genişliği eşitledi ise. Sonra, xsağdan pikseller gibi görünen bir şey olması kadar basittir background-position: -5px 0px.
• Yüzdeler için background-positionburada açıklanandan daha iyi görülen özel davranışlar sergilenmektedir. Bi dene. Esasen, background-position: 90% 50%arka plan resminin sağ kenarını kabın sağ kenarından% 10 uzağa hizalar.
• Görüntüyü içeren bir div oluşturun. position: relativeÖnceden ayarlanmamışsa , içeren öğenin konumunu açıkça ayarlayın. Uygun position: absolute; right: 10px; top: 10px;olarak gördüğünüz gibi son ikisini ayarlayarak görüntü kabını olarak ayarlayın. Görüntü div kabını içeren öğeye yerleştirin.

Bunu dene:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

Yukarıdaki kodun tüm öğeyi (yalnızca arka plan resmini değil) sağdan 5 piksel taşıyacağını unutmayın. Bu sizin durumunuz için uygun olabilir.

CSS3'te yapabilirsiniz:

background-position: right 20px bottom 20px;

Firefox, Chrome, IE9 + 'da çalışır

Kaynak: MDN

Sağ kenar boşluğu görevi görecek şekilde sağda saydam piksellerle görüntü geçici çözümü.

Aynısı için görüntü geçici çözümü, görüntünün sağında tam olarak sağ kenar boşluğu ( örneğin: 5 piksel, 10 piksel vb.)

Bu, sabit genişliklerde ve yüzde olarak genişliklerde tutarlı bir şekilde çalışır. Başlığın sağında artı / eksi veya yukarı / aşağı ok görüntüsü olan akordeon başlıkları için pratik olarak iyi bir çözüm!

Dezavantajı: Maalesef, kabın arka plan kısmı ve CSS arka plan görüntüsünün arka plan rengi aynı düz renkte değilse (degrade / skeç olmadan), çoğunlukla beyaz / siyah vb.

Modern tarayıcıların bu günlerinde bu konuya rastlarsanız, sözde sınıf kullanabilirsiniz: arka planla pratik bir şey yaptıktan sonra.

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

bu css, arka tarafta ".container" öğesinin sağ alt köşesine 20 piksellik alan bırakacak.

Bu kemanı görün örneğin http://jsfiddle.net/h6K9z/226/

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

Piksel dolgusunu görüntüye koymanız yeterlidir - fotoğrafın tuval boyutuna 10px veya daha fazlasını ekleyin ve CSS'de doğru hizalayın.

Tablo başlığının sağ tarafında her zaman bir açılır ok almak için benzer bir görev yapmaya çalışıyordum ve Chrome ve Firefox'ta işe yaramış gibi görünüyordu, ancak safari bunun geçersiz bir özellik olduğunu söylüyordu.

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

Müfettişte biraz karışıklık yaptıktan sonra, IE8 +, Chrome, Firefox ve Safari'de çalışan bu çapraz tarayıcı çözümünün yanı sıra duyarlı tasarımlar da buldum.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

İşte nasıl göründüğüne ve çalıştığına dair bir kod kalemi. Codepen SCSS ile yazılmıştır - http://cdpn.io/xqGbk

Yalnızca x eksenini belirtmek istiyorsanız, aşağıdakileri yapabilirsiniz:

background-position-x: right 100px;

Bahsetmediğim başka bir çözüm, sözde öğeleri kullanmaktır ve bu çözümün CSS 2.1 uyumlu herhangi bir tarayıcı (≥ IE8, ≥ Safari 2, ...) ile çalışacağına ve aynı zamanda duyarlı olması gerektiğine inanıyorum:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

Örnek : Öğe örn. kare büyüklüğünde 100 piksel (kenarlıklar dikkate alınmadan) 10 piksel dolguya sahiptir ve sağ dolgu içinde bir arka plan görüntüsü gösterilmelidir. Bu, sözde öğenin 80 piksel büyüklüğünde bir kare olduğu anlamına gelir. Bunu sağdaki öğenin sağ kenarına yapıştırmak istiyoruz : -10px; . Arka plan resmi 5px'i sağ kenarlıktan uzak tutmak istiyorsak, sözde elemanı 5px'i öğenin sağ kenarından sağa yapıştırmamız gerekir : -5px; ... Burada kendiniz için test edin: http://jsfiddle.net/yHucT/

Kap sabit bir yüksekliğe sahipse: Yüzdeleri (arka plan konumu) doğru şekilde oturana kadar tizleyin.

Kapsayıcı dinamik bir yüksekliğe sahipse : Arka planınız ile kabınız arasında bir dolgu istiyorsanız (özel stil girişleri seçildiğinde olduğu gibi), dolgularınızı görüntünüze ekleyin ve arka plan konumunu sağa veya alta ayarlayın.

Seçimin sağından 5 piksel sığacak bir seçim kutusunun arka planını almaya çalışırken bu soruya tökezledim. Benim durumumda, arka planım aşağı açılır temel ok simgesinin yerini alacak bir ok. Benim durumumda, dolgu arka plan için her zaman aynı kalır (sağdan 5-10 piksel), bu yüzden gerçek arka plan görüntüsüne getirmek kolay bir değişikliktir (boyutlarını sağ tarafta 5-10 piksel daha geniş hale getirir).

Bu yardımcı olur umarım!

Arka plan resminizi bir düzenleyicide sağ taraftan x piksel olacak şekilde konumlandırabilirsiniz.

background: url(images_url) no-repeat right top;

Arka plan resmi sağ üstte konumlandırılacak, ancak sağdan x piksel olarak görünecektir.

Soldan ayarlanan yüzdeler benim beğenme için biraz kırılgan. Böyle bir şeye ihtiyacım olduğunda, konteyner stilimi bir sargı elemanına ekleme eğilimindeyim ve ardından arka planı iç eleman üzerinebackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

.content-breakoutSınıf isteğe bağlıdır ve gerekli (negatif marj değerleri sarıcı dolgu karşılık gelen değerleri aynı olmalıdır) eğer içerik dolgu içine yemeye izin verecektir. Biraz ayrıntılı, ancak görüntünün genişliğine ve yüksekliğine göre göreli konumlandırmasından endişe etmeden güvenilir bir şekilde çalışır.

Bu soru sorulduğundan beri çok uzun, ama sadece bu problemle karşılaştım ve bunu yaparak anladım:

background-position:95% 50%;

Negatif değerler için çözüm. Görüntüyü hareket ettirmek için sağ dolguyu ayarlayın.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Bu Chrome 27'de çalışıyor, geçerli olup olmadığını veya diğer tarayıcıların onunla ne yaptığını bilmiyorum. Buna şaşırdım.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Tüm gerçek tarayıcılar için (ve IE9 + için) çalışır:

background-position: right 10px top 10px;

RTL WordPress temalarını kullanıyorum. Örneğe bakın: geçici web sitesi veya gerçek web sitesi yakında hazır olacaktır. Büyük DIV'lerin sağ köşelerindeki simgelere bakın.

Tüm arka plan için daha iyi: url ('../ images / bg-menu-dropdown-top.png') 20 piksel üst tekrarsız kaldı! Önemli;