Umieścić obraz tła CSS x piksele po prawej stronie?

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-positionwartości xiy, wydaje się, że dają one tylko stałe korekty pikseli odpowiednio od lewej i od góry.

background-position: right 30px center;

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

Można użyć atrybutu borderjako długości od prawej strony

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

Jest jeden sposób, ale nie jest obsługiwany w każdej przeglądarce (patrz tutaj )

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

Działa w każdej nowoczesnej przeglądarce, ale możliwe jest, że IE9 ulega awarii . Również brak pokrycia dla = <IE8.

O 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:

• Upewnij się, że obraz tła jest zgodny z rozmiarem kontenera (przynajmniej na szerokość) i ustaw, background-repeat: repeatlub repeat-xjeśli tylko szerokość jest wyrównana. Wtedy pojawienie się czegoś xpo prawej stronie jest tak proste jak background-position: -5px 0px.
• Użycie wartości procentowych do background-positionpokazania specjalnych zachowań, które są lepiej widoczne niż tutaj opisane. Spróbuj. Zasadniczo background-position: 90% 50%sprawi, że prawa krawędź obrazu w tle znajdzie się w linii prostej o 10% od prawej krawędzi pojemnika.
• Utwórz div zawierający obraz. Jawnie ustaw pozycję elementu zawierającego, position: relativejeśli jeszcze nie została ustawiona. Ustaw pojemnik z obrazem na position: absolute; right: 10px; top: 10px;, oczywiście dostosowując dwa ostatnie według własnego uznania. Umieść pojemnik div obrazu w elemencie zawierającym.

Spróbuj tego:

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

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.

Możesz to zrobić w CSS3:

background-position: right 20px bottom 20px;

Działa w Firefox, Chrome, IE9 +

Źródło: MDN

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.

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.

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

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/

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

Po prostu wstaw piksel do obrazu - dodaj 10px lub cokolwiek innego do rozmiaru płótna obrazu w Photoshopie i wyrównaj go w CSS.

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

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

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.

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

Oto kod tego, jak to wygląda i działa. Codepen jest napisany przy pomocy SCSS - http://cdpn.io/xqGbk

Jeśli chcesz określić tylko oś X, możesz wykonać następujące czynności:

background-position-x: right 100px;

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

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

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/

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!

Możesz ustawić obraz tła w edytorze tak, aby znajdował się x pikseli z prawej strony.

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

Obraz w tle zostanie umieszczony w prawym górnym rogu, ale z prawej strony będzie wyglądał na x pikseli.

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

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

Już od dawna nie zadawałem tego pytania, ale właśnie natknąłem się na ten problem i dostałem go, wykonując:

background-position:95% 50%;

Rozwiązanie dla wartości ujemnych. Dostosuj dopełnienie w prawo, aby przesunąć obraz.

<div style='overflow:hidden;'>

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

    </div>

</div>

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.

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

Działa dla wszystkich prawdziwych przeglądarek (i IE9 +):

background-position: right 10px top 10px;

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.

Lepsze dla całego tła: URL („../ images / bg-menu-dropdown-top.png”) pozostawił 20 pikseli na górę, nie powtarzaj się! Ważne;