Odsuń obraz tła od prawej za pomocą CSS

Czy istnieje sposób na ustawienie obrazu tła o pewną liczbę pikseli z prawej strony jego elementu?

Na przykład, aby ustawić coś o określonej liczbie pikseli (powiedzmy 10) od lewej , tak to zrobiłbym:

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

Uważam, że ta funkcja CSS3 jest pomocna:

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

O ile wiem, nie jest to obsługiwane w IE8. W najnowszym Chrome / Firefox działa dobrze.

Zobacz: Mogę użyć aby uzyskać szczegółowe informacje na temat obsługiwanych przeglądarek.

Wykorzystane źródło: http://tanalin.com/en/blog/2011/09/css3-background-position/

Aktualizacja :

Ta funkcja jest teraz obsługiwana we wszystkich głównych przeglądarkach, w tym także w przeglądarkach mobilnych.

!! Nieaktualna odpowiedź, ponieważ CSS3 wprowadził tę funkcję

Czy istnieje sposób na ustawienie obrazu tła o pewną liczbę pikseli z prawej strony jego elementu?

Nie.

Popularne obejścia obejmują

• ustawienie margin-right zamiast tego elementu
• dodając przezroczyste piksele do samego obrazu i ustawiając go top right
• lub obliczanie pozycji za pomocą jQuery po znaniu szerokości elementu.

Najłatwiejszym rozwiązaniem jest użycie wartości procentowych. Nie jest to dokładnie odpowiedź, której szukałeś, ponieważ poprosiłeś o precyzję pikseli, ale jeśli potrzebujesz czegoś, co ma trochę wypełnienia między prawą krawędzią a obrazem, ustawienie 99% zwykle działa wystarczająco dobrze.

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

Nieaktualna odpowiedź: jest teraz zaimplementowany w głównych przeglądarkach, zobacz inne odpowiedzi na to pytanie.

CSS3 zmodyfikował specyfikację, background-positionaby działał z innym punktem początkowym. Niestety nie mogę znaleźć żadnego dowodu na to, że jest on zaimplementowany w głównych przeglądarkach.

http://www.w3.org/TR/css3-background/#the-background-position Patrz przykład 12.

background-position: right 3em bottom 10px;

Jak zaproponowano tutaj , jest to całkiem rozwiązanie dla wielu przeglądarek, które działa idealnie:

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

Użyłem go, ponieważ funkcja CSS3 polegająca na określaniu przesunięć zaproponowanych w odpowiedzi oznaczonej jako rozwiązanie pytania nie jest jeszcze obsługiwana w przeglądarkach. Na przykład

Najwłaściwszą odpowiedzią jest nowa składnia cztery wartości dla background-position, ale aż wszystkie przeglądarki obsługują go najlepszym rozwiązaniem jest połączenie wcześniejszych odpowiedzi w następującej kolejności:

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

Prostą, ale brudną sztuczką jest po prostu dodanie przesunięcia, którego chcesz do obrazu, którego używasz jako tła. nie da się go utrzymać, ale wykonuje zadanie.

Działa to w większości nowoczesnych przeglądarek ... oprócz IE (obsługa przeglądarki) . Mimo że strona zawiera listę> = IE9 jako obsługiwane, moje testy się z tym nie zgadzały.

Możesz użyć właściwości calc () css3 w ten sposób;

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

Dla mnie jest to najczystszy i najbardziej logiczny sposób uzyskania marginesu po prawej stronie. Korzystam również z rezerwowego korzystania border-right: 10px solid transparent;z IE.

Ok, jeśli rozumiem, o co prosisz, zrobiłbyś to;

Wywołano twój kontener DIV #main-containeri .my-elementto jest w nim. Użyj tego, aby zacząć;

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

Nawiasem mówiąc, lepiej ćwiczyć korzystanie z klas, jeśli odwołujesz się do elementu niższego poziomu na stronie (zakładam, że stąd moja nazwa się zmienia powyżej.

Specyfikacja CSS3 zezwalająca na różne pochodzenie pozycji tła jest teraz obsługiwana w Firefox 14, ale wciąż nie w Chrome 21 (podobno IE9 częściowo je obsługuje, ale nie przetestowałem go osobiście)

Oprócz problemu z Chrome, do którego nawiązał @MattyF, znajduje się bardziej zwięzłe streszczenie tutaj: http://code.google.com/p/chromium/issues/detail?id=95085

Jeśli masz proporcjonalne elementy, możesz użyć:

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

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

W tym przykładzie .validbyłaby klasa ze zdjęciem i .halfbyłaby rzędem o połowie wielkości standardowego.

Brudny, ale działa jak urok i można go łatwo opanować.

Jeśli chcesz na przykład użyć tego do dodawania strzałek / innych ikon do przycisku, możesz użyć pseudoelementów css?

Jeśli naprawdę jest to tło dla całego przycisku, zwykle włączam odstępy do obrazu i po prostu go używam

background-position: right 0;

Ale jeśli muszę dodać na przykład zaprojektowaną strzałkę do przycisku, zwykle mam ten HTML:

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

I zwykle wykonuj następujące czynności z 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;
}

Korzystając z selektora: po, dodaję element za pomocą CSS, aby zawierał tę małą ikonę. Możesz zrobić to samo, dodając rozpiętość lub <i>element wewnątrz elementu a. Ale myślę, że jest to czystszy sposób dodawania ikon do przycisków i jest obsługiwany w różnych przeglądarkach.

możesz sprawdzić skrzypce tutaj: http://codepen.io/anon/pen/PNzYzZ

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

użyć środkowej prawej jako pozycji, a następnie dodać przezroczystą ramkę, aby ją przesunąć?

Jeśli masz element o stałej szerokości i znasz szerokość obrazu tła, możesz po prostu ustawić pozycję tła na: szerokość elementu - szerokość obrazu - odstęp, który chcesz po prawej stronie.

Na przykład: w przypadku elementu o szerokości 100 pikseli i obrazu o szerokości 300 pikseli, aby uzyskać odstęp 10 pikseli po prawej stronie, ustaw go na 100-300-10 = -210px:

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

Otrzymujesz skrajnie prawe 80 pikseli obrazu po lewej stronie elementu i odstęp 20 pikseli po prawej stronie.

Wiem, że to może zabrzmieć głupio, ale czasem oszczędza czas ... Używam tego tak dużo w pionie (przerwa u dołu) do linków nawigacyjnych z tekstem pod obrazem.

Nie jestem jednak pewien, czy dotyczy to twojej sprawy.

mój problem polegał na tym, że potrzebowałem obrazu tła, aby pozostawał w tej samej odległości od prawej ramki, gdy okno jest przeskalowane, tj. na tablecie / telefonie komórkowym itp. Moim rozwiązaniem jest użycie percenatge takiego:

background-position: 98% 6px;

i przykleja się

tak! dobrze ustawić obraz tła tak, jakby 0px z prawej strony przeglądarki zamiast z lewej - używam:

background-position: 100% 0px;