Myślę, że odpowiedź brzmi „nie”, ale czy możesz ustawić obraz tła za pomocą CSS, tak aby stała liczba pikseli była z prawej strony?
Jeśli ustawię background-position
wartości xiy, wydaje się, że dają one tylko stałe korekty pikseli odpowiednio od lewej i od góry.
Odpowiedzi:
Działa w większości przeglądarek. Zobacz: http://caniuse.com/#feat=css-background-offsets, aby uzyskać pełną listę.
Więcej informacji: http://www.w3.org/TR/css3-background/#the-background-position
źródło
Można użyć atrybutu
border
jako długości od prawej stronyźródło
Jest jeden sposób, ale nie jest obsługiwany w każdej przeglądarce (patrz tutaj )
Działa w każdej nowoczesnej przeglądarce, ale możliwe jest, że IE9 ulega awarii . Również brak pokrycia dla = <IE8.
źródło
background-position-x: calc(90%);
to znaczy, żeO ile mi wiadomo, specyfikacja CSS nie zawiera dokładnie tego, o co pytasz, oczywiście poza wyrażeniami CSS. Opierając się na założeniu, że nie chcesz używać wyrażeń ani Javascript, widzę trzy hackerskie rozwiązania:
background-repeat: repeat
lubrepeat-x
jeśli tylko szerokość jest wyrównana. Wtedy pojawienie się czegośx
po prawej stronie jest tak proste jakbackground-position: -5px 0px
.background-position
pokazania specjalnych zachowań, które są lepiej widoczne niż tutaj opisane. Spróbuj. Zasadniczobackground-position: 90% 50%
sprawi, że prawa krawędź obrazu w tle znajdzie się w linii prostej o 10% od prawej krawędzi pojemnika.position: relative
jeśli jeszcze nie została ustawiona. Ustaw pojemnik z obrazem naposition: absolute; right: 10px; top: 10px;
, oczywiście dostosowując dwa ostatnie według własnego uznania. Umieść pojemnik div obrazu w elemencie zawierającym.źródło
Spróbuj tego:
Zauważ jednak, że powyższy kod przeniesie cały element (nie tylko obraz tła) o 5 pikseli z prawej strony. To może być w porządku dla twojej sprawy.
źródło
Możesz to zrobić w CSS3:
Działa w Firefox, Chrome, IE9 +
Źródło: MDN
źródło
Obejście obrazu z przezroczystymi pikselami po prawej stronie, które służą jako prawy margines.
Obejściem tego samego problemu jest utworzenie obrazu PNG lub GIF (formaty plików graficznych, które obsługują przezroczystość), które mają przezroczystą część po prawej stronie obrazu dokładnie równą liczbie pikseli, dla której chcesz uzyskać odpowiedni margines ( np .: 5px, 10px itp.)
Działa to dobrze konsekwentnie na stałych szerokościach, a także w procentach. Praktycznie dobre rozwiązanie dla nagłówków akordeonu posiadających znak plus / minus lub strzałkę w górę / w dół po prawej stronie nagłówka!
Wada: Niestety, nie można używać JPG, chyba że tło pojemnika i kolor tła obrazu CSS mają ten sam płaski kolor (bez gradientu / winiety), głównie biały / czarny itp.
źródło
Jeśli natkniesz się na ten temat w czasach współczesnych przeglądarek, możesz użyć pseudoklasy: po zrobić praktycznie wszystko z tłem.
ten css umieści tło w prawym dolnym rogu elementu „.container” ze spacją 20px po prawej stronie.
Zobacz to skrzypce na przykład http://jsfiddle.net/h6K9z/226/
źródło
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:
źródło
Po prostu wstaw piksel do obrazu - dodaj 10px lub cokolwiek innego do rozmiaru płótna obrazu w Photoshopie i wyrównaj go w CSS.
źródło
Próbowałem wykonać podobne zadanie, aby uzyskać strzałkę rozwijaną zawsze po prawej stronie nagłówka tabeli i wymyśliłem to, co wydawało się działać w Chrome i Firefox, ale safari mówiło mi, że jest to nieprawidłowa właściwość.
Po trochę zamieszania w inspektorze, wymyśliłem to rozwiązanie dla różnych przeglądarek, które działa w IE8 +, Chrome, Firefox i Safari, a także responsywne projekty.
Oto kod tego, jak to wygląda i działa. Codepen jest napisany przy pomocy SCSS - http://cdpn.io/xqGbk
źródło
Jeśli chcesz określić tylko oś X, możesz wykonać następujące czynności:
źródło
background-position: right -100px center;
Pamiętaj, że jeśli go pominiesz,y-position
to nie działa poprawnie, ponieważ uważa, że do czego służą piksele.Innym rozwiązaniem, o którym nie wspomniałem, jest użycie pseudoelementów i uważam, że to rozwiązanie będzie działać z dowolną przeglądarką zgodną z CSS 2.1 (≥ IE8, ≥ Safari 2, ...) i powinno również reagować:
Przykład : element np. kwadratowy rozmiar 100 pikseli (bez uwzględnienia obramowań) ma wypełnienie 10 pikseli, a obraz tła powinien być wyświetlany w prawym wypełnieniu. Oznacza to, że pseudoelement jest kwadratem o wielkości 80 pikseli. Chcemy przykleić go do prawej krawędzi elementu za pomocą prawej: -10px; . Jeśli chcielibyśmy mieć obraz tła 5px od prawej granicy, musimy przykleić pseudoelement 5px od prawej granicy elementu za pomocą prawej: -5px; ... Sprawdź to tutaj: http://jsfiddle.net/yHucT/
źródło
Jeśli pojemnik ma stałą wysokość: Podkreśl wartości procentowe (położenie tła), aż dopasuje się poprawnie.
Jeśli kontener ma wysokość dynamiczną: jeśli chcesz dopełnienie między tłem a kontenerem (na przykład podczas wprowadzania niestandardowych stylów, zaznacz), dodaj dopełnienie do obrazu i ustaw pozycję tła na prawą lub dolną.
Natknąłem się na to pytanie, gdy próbowałem uzyskać tło dla wybranego pola wyboru, na przykład 5 pikseli z prawej strony mojego wyboru. W moim przypadku moje tło jest strzałką w dół, która zastąpiłaby podstawową ikonę rozwijaną. W moim przypadku wypełnienie zawsze pozostanie takie samo (5-10 pikseli z prawej) dla tła, więc łatwą modyfikacją jest wprowadzenie rzeczywistego obrazu tła (zwiększenie jego wymiarów o 5-10 pikseli po prawej stronie.
Mam nadzieję że to pomoże!
źródło
Możesz ustawić obraz tła w edytorze tak, aby znajdował się x pikseli z prawej strony.
Obraz w tle zostanie umieszczony w prawym górnym rogu, ale z prawej strony będzie wyglądał na x pikseli.
źródło
Ulepszenie procentów z lewej strony jest dla mnie trochę kruche. Kiedy potrzebuję czegoś takiego, zwykle dodam styl opakowania do elementu opakowania, a następnie nakładam tło na element wewnętrzny za pomocą
background-position: right bottom
.content-breakout
Klasa jest opcjonalny i pozwoli treść jeść do wyściółki jeśli wymagana (ujemne wartości marginesów należy dopasować odpowiednie wartości w padding owijki). Jest to trochę szczegółowe, ale działa niezawodnie, nie martwiąc się o względne ustawienie obrazu w porównaniu do jego szerokości i wysokości.źródło
Już od dawna nie zadawałem tego pytania, ale właśnie natknąłem się na ten problem i dostałem go, wykonując:
źródło
Rozwiązanie dla wartości ujemnych. Dostosuj dopełnienie w prawo, aby przesunąć obraz.
źródło
Działa to w przeglądarce Chrome 27, nie wiem, czy jest poprawna czy nie, ani co robią z nią inne przeglądarki. Byłem tym zaskoczony.
źródło
Działa dla wszystkich prawdziwych przeglądarek (i IE9 +):
Używam go do motywów WordPress RTL. Zobacz przykład: strona tymczasowa lub prawdziwa strona internetowa wkrótce będzie dostępna. Spójrz na ikony w dużych rogach DIV.
źródło
Lepsze dla całego tła: URL („../ images / bg-menu-dropdown-top.png”) pozostawił 20 pikseli na górę, nie powtarzaj się! Ważne;
źródło