czy obraz tła może być negatywnie umieszczony na dole lub z prawej strony, czy tylko część obrazu jest powtarzana?

Question

Składam sprite'a i mam dwa pytania.

Coś, co zawsze zastanawiałem się, czy możliwe jest negatywne umieszczenie obrazu tła na prawo lub na dole. Negatywna pozycja to rzeczy z chleba i masła po lewej stronie elementu lub góry, ale co z prawą i dolną?

Jeśli mam element graficzny o wymiarach 500 na 500 pikseli, czy mogę ustawić lewą krawędź obrazu tła, aby wyświetlać 5 pikseli od prawej strony, używając wartości ujemnej rahter niż 495 pikseli, aby ją przesunąć?

Drugie pytanie dotyczy tego, czy mogę użyć tylko niewielkiej części obrazu i powtórzyć go bez reszty wyświetlanego obrazu.

Na przykład, mogę mieć sprite thats 300px kwadratowe i wypełnione wszelkiego rodzaju rzeczy. Czy można wziąć kwadratową część tego obrazu o wielkości 50 pikseli i powtórzyć ją w tle elementu?

Bardzo wątpię, czy jest to możliwe, ale muszę uśpić małpę!

Answer 1

Na pierwsze pytanie, nie, nie możesz.

Na twoje drugie pytanie, nie, nie możesz.

Answer 2

Obiekt background-position ma kilka różnych wartości:

left top 
left center 
left bottom 
right top 
right center 
right bottom 
center top 
center center 
center bottom 

Można również określić pozycje X i Y dla niego. Aby uzyskać więcej informacji na jej temat, spojrzeć na ten link:

https://developer.mozilla.org/docs/CSS/background-position

Co do drugiego pytania, to nie jest możliwe przy użyciu prostych CSS.

Answer 3

Jeśli używasz podstawowych pozycji tła, możesz. Więc chcesz coś takiego:

background-position: 190% 0; 

Answer 4

Oni już odpowiedź, że nie można użyć wartości ujemne, ale może można spróbować:

Daj element background-position:right bottom i obraz tła powinien mieć tylko część, którą chcesz pokazać.

Answer 5

Aby "negatywnie ustawić obraz tła na prawo lub na dole", można użyć wartości procentowych mniejszych niż 0%. np .:

background-position: -11% -7%; 

... ustawia obraz przycięty w prawym dolnym rogu, jeśli obraz ma podobną wielkość do elementu. Możesz potrzebować więcej ujemnych wartości procentowych, jeśli nie mają tego samego rozmiaru.

Aby "negatywnie ustawić obraz tła na na lewo lub na górze", można użyć wartości procentowych większych niż 100%. np .:

background-position: 105% 110%; 

... pozycjonuje obraz przycięty na górę i znowu w lewo przy założeniu, że są one o podobnych rozmiarach. Możesz potrzebować większych wartości procentowych, jeśli nie mają tego samego rozmiaru.

Znajdowanie dokładnych wartości procentowych, których potrzebujesz, nie jest jednak bardzo intuicyjne. CSS używa procentów nieco inaczej z background-position. Wartość jest procentem wzdłuż zarówno obrazu, jak i elementu (vel viewport), gdzie są one takie same. Z tego powodu 0% jest równe left, 50% jest równe center, a 100% jest równe right. Poza tym zakresem jest jeszcze mniej intuicyjny, ponieważ "mniej niż zero" pasuje do punktu przed górną/lewą krawędzią zarówno na obrazie, jak i na elemencie (skutecznie przesuwając obraz z góry/z lewej strony) i "jest większy niż 100% "pasuje do punktu większego niż skrajna dolna/prawa krawędź, co powoduje przesunięcie obrazu od dołu/z prawej strony.

Te równanie pomaga określić, w którym miejscu obrazu ma się znaleźć. Prosta algebra pozwoli ci uzyskać zmienną, którą chcesz poznać (np. Rozwiązać dla procentu).

effectiveLeft = (elementWidth - imageWidth) * percentageLeft; 
effectiveTop = (elementHeight - imageHeight) * percentageTop; 

Co do drugiego pytania (powtarzając część obrazu), nie wierzę, to jest możliwe, chyba że były powtarzać wiele elementów przycinanie, który jest inny niż to, co pan chce.

Answer 6

Na ujemny prawy dolny pozycja prawo do pracy, to DIV musi być koniecznie nieruchomość background-repeat: no-repeat;