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

443

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;
}
pseudonim
źródło
Na pewno nie masz na myśli background-position: -10px 0;? Tylko sprawdzam :)
trzydziesty
1
Wiem, że ma wiele duplikatów, ale nie mogę znaleźć żadnego z nich.
Pekka
1
@ thirtydot, który przesuwa go o 10 pikseli w lewo od lewej krawędzi.
nickf
to głupie, że nie jest dostępne ...
Juan
@nickf zdajesz sobie sprawę, że do końca 2013 roku nie był dostępny na większości urządzeń, prawda?
Juan

Odpowiedzi:

786

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.

Steven
źródło
23
To jest świetne, ale niestety nie działa w Safari 5.1.7 (co jest niezwykle ważne, jeśli oglądane przez telefony komórkowe)
MosheElisha
5
Działa teraz na urządzeniach mobilnych (sprawdzone na Android, iOS i Windows Phone). Nadal Safari 5.1.7 nie obsługuje pozycji tła podanej jak tutaj.
Szorstki
8
Używam tego, ale z procentową rezerwą dla starszych przeglądarek, np. pozycja tła: 95% środkowa; pozycja tła: prawy środek 13px;
gregdev,
1
Nie jestem pewien, ile osób nadal używa przeglądarek na tyle starych, by tego nie obsługiwać. Użytkownicy przeglądarki Safari powinni już korzystać z nowszej wersji, chociaż wciąż istnieje wiele starszych urządzeń z Androidem. caniuse.com/#feat=css-background-offsets Na tyle łatwe, że można zastosować procentową rezerwę zastępczą (chociaż nie jest dokładnie taka sama).
Mark
29
Pamiętaj, że działa to tylko wtedy, gdy określisz pozycję kardynalną dla pozycji pionowej i poziomej, np right left top bottom. Na przykład następujące elementy nie będą renderowane: background-position: right 10px 10pxnależy je zapisać jakobackground-position: right 10px top 10px
chadiusvt
110

!! 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.
Pekka 웃
źródło
6
Bardziej kompleksowe wsparcie dla rozszerzonej „pozycji tła” CSS3 jest tuż za rogiem: stackoverflow.com/questions/501375/…
Vlad Magdalin
92

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;
}
Matt Brock
źródło
30
+1 „Przejdziemy przez wyrównanie pikseli w przyszłym tygodniu” - zawsze działa.
moonwave99
2
To rozwiązanie wydaje się działać najbardziej konsekwentnie w różnych przeglądarkach.
Evan Haas,
49

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;
Tami
źródło
Dzięki Tami! Niestety, nie działało to dla mnie ani w Firefoksie 4, ani w Chrome 11.
nickf
Jest to zaimplementowane w Operze. Pomyślałem, że to zbyt piękne, aby mogło być prawdziwe, a potem przetestowałem w innych przeglądarkach i miałem rację.
Vian Esterhuizen,
1
To nadal nie działa w bieżącej wersji Chrome. Version 21.0.1180.89
andlrc
3
Chrome Canary (v26) obsługuje teraz to. Gdy tylko spłynie to do kanału dystrybucji, a Safari zaktualizuje silnik, tylko IE6-8 nie będzie obsługiwać (IE9 / 10 już obsługuje nowy format).
Vlad Magdalin
1
Właśnie to przetestowałem i działa teraz w Firefox (v.18.0.2), IE (v.9.0.8) i Chrome (v.25.0.1364.97), ale nie działa jeszcze w Safari (v.5.1.2) . Chciałbym wiedzieć, czy ktoś wie, kiedy to może zostać wprowadzone ;-)
Chaya Cooper
40

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

luksak
źródło
1
A kiedy potrzebuję, aby ta ramka była określonego koloru?
machineaddict
1
To świetna odpowiedź, ponieważ możesz mieć precyzję pikseli, jednocześnie zachowując zgodność z różnymi przeglądarkami. Dzięki! (A jeśli chcesz mieć obramowanie określonego koloru, użyj opakowania jakiegoś typu, aby owinąć wejście i dodać obramowanie do tego elementu.)
Gavin
23

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+ */
stedman
źródło
15

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.

Merosi
źródło
8

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.

Nowokaina
źródło
1
To jest świetne, ale niestety nie działa w Safari 5.1.7 (co jest niezwykle ważne, jeśli oglądane przez telefony komórkowe)
MosheElisha
Następnie powinieneś użyć tła działającego w Safari i takiego, które może zostać zastąpione przez przeglądarki, które mogą z niego korzystać. Na przykład: background-position: 92% 8px; background-position: calc(100% - 12px) 8px;
Laki Politis
Nie działa na wszystkich przeglądarkach, koleś. right 10px centerSkładnia ma bardziej rozszerzoną obsługę w przeglądarkach.
Farzad YZ
Przeczytaj pierwszą linię, w której stwierdzam, że działa to w „najnowocześniejszych przeglądarkach”. Nigdy nie powiedziałem, że działa na wszystkich z nich.
Novocaine
Według caniuse użycie kalendarza spowodowałoby awarię IE9 ... po zastąpieniu go _przez-
Ruskin
4

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.

Desi
źródło
3

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

Tom Gaulton
źródło
Właśnie to przetestowałem i działa teraz w Firefox (v.18.0.2), IE (v.9.0.8) i Chrome (v.25.0.1364.97), ale nie w Safari (v.5.1.2)
Chaya Cooper
3

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ć.

Nighto
źródło
1
W moim przypadku (przy użyciu układu o stałej szerokości) robi to dokładnie to, czego potrzebuję. Dzięki.
Gavin,
3

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

Stijn_d
źródło
tak powinno być content: ''; , content:0;ale było to dla mnie przydatne rozwiązanie
Nat
3
background-position: calc(100% - 8px);
Zapał Murapa
źródło
2

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

André Figueira
źródło
1
To nie jest złe, ale wtedy zawartość zostanie również przesunięta z prawej strony. To może, ale nie musi, być przełomem. Oto przykład tego, jak to wygląda: jsbin.com/ijewoq/1
nickf
Pomyśl, że to tylko kwestia wyważenia przy odrobinie prób i błędów :) mam nadzieję, że się uda!
André Figueira
2

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.

Julix
źródło
2

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ę

JC_Dev
źródło
Może to działać w sytuacjach, w których znasz dokładnie wymiary okna, ale przez większość czasu w Internecie nie możesz być tego pewien. Spójrz na zaakceptowaną odpowiedź, która zadziała we wszystkich sytuacjach (w obsługiwanych przeglądarkach).
nickf
2

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

background-position: 100% 0px;
David Jazzy Dawson
źródło