W tym artykule, http://css-tricks.com/css-sprites/ , jest mowa o tym, jak wyciąć mniejszy obraz z jednego większego obrazu. Czy możesz mi powiedzieć, czy jest to możliwe / jak mogę wyciąć mniejszy obraz, a następnie przeskalować przycięty region, zanim go rozłożę?
Oto przykład z tego artykułu:
A
{
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
background-position: -10px -56px;
}
Chciałbym wiedzieć, jak skalować ten obraz po przycięciu go z pliku spriteme1.png
Oto adres URL przykładu: http://css-tricks.com/examples/CSS-Sprites/Example1After/
Chciałbym więc wiedzieć, czy mogę zmniejszyć ikony obok pozycji 1, 2, 3, 4?
css
css-sprites
Michael
źródło
źródło
Odpowiedzi:
Możesz użyć rozmiaru tła , ponieważ jest obsługiwany przez większość przeglądarek (ale nie wszystkie http://caniuse.com/#search=background-size )
Lub
Możesz użyć kombinacji powiększenia dla webkit / ie i transform: scale for Firefox (-moz-) i Opera (-o-) dla komputerów stacjonarnych i mobilnych z różnymi przeglądarkami
źródło
Kiedy używasz duszków, jesteś ograniczony do wymiarów obrazu w duszku. Właściwość
background-size
CSS, o której wspomniał Stephen, nie jest jeszcze szeroko obsługiwana i może powodować problemy z przeglądarkami takimi jak IE8 i starszymi - a biorąc pod uwagę ich udział w rynku, nie jest to opłacalna opcja.Innym sposobem rozwiązania problemu jest użycie dwóch elementów i przeskalowanie duszka, używając go z
img
tagiem, na przykład:W ten sposób zewnętrzny element (
div.sprite-image
) przycina obraz o wymiarach 20x20px zimg
tagu, który działa jak przeskalowanybackground-image
.źródło
src
przez css.<img>
należy używać tylko wtedy, gdy jest częścią treści. do celów projektowych obrazy tła są koniecznością.Spróbuj tego: Rozciągliwe Sprites - Cross-browser, responsywna zmiana rozmiaru / rozciąganie obrazków CSS
Ta metoda skaluje duszki „responsywnie”, dzięki czemu szerokość / wysokość dostosowuje się do rozmiaru okna przeglądarki. Nie jest używany,
background-size
ponieważ obsługa tego w starszych przeglądarkach nie istnieje.CSS
HTML
źródło
transform: scale();
sprawi, że oryginalny element zachowa swój rozmiar.Uważam, że najlepszą opcją jest użycie
vw
. Działa jak marzenie:https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/
źródło
Oto, co zrobiłem, aby to zrobić. Pamiętaj, że nie będzie działać w IE8 i starszych.
Szerokość obrazu tła zostanie zmniejszona, gdy element macierzysty
#element
skalowania w dół. Możesz zrobić to samo z jego wysokością, konwertującheight
na procent. Jedynym trudnym zadaniem jest obliczenie wartości procentowych dlabackground-position
.Pierwsza wartość procentowa to szerokość docelowego obszaru duszka przy normalnej szerokości podzielona przez całkowitą szerokość duszka i pomnożona przez 100.
Drugi procent to wysokość docelowego obszaru duszka przed skalowaniem podzielona przez całkowitą wysokość duszka i pomnożona przez 100.
Sformułowanie tych dwóch równań jest trochę niechlujne, więc daj mi znać, jeśli chcesz, abym lepiej to wyjaśnił.
źródło
To wydaje się działać dla mnie.
Jeśli duszki są w siatce, ustaw na
background-size
100% liczbę duszków w poprzek i 100% liczbę duszków w dół. Następnie użyj,background-position -<x*100>% -<y*100>%
gdzie x i y to sprite od zeraInnymi słowy, jeśli chcesz, aby trzeci duszek od lewej i drugi rząd to 2 powyżej i 1 w dół
Na przykład oto sprite arkusza sprite'ów 4x2
A oto przykład
Jeśli duszki mają różne rozmiary, musisz ustawić
background-size
dla każdego duszka procent, tak aby szerokość duszka wynosiła 100%Innymi słowy, jeśli obraz ma szerokość 640 pikseli, a sprite wewnątrz tego obrazu ma szerokość 45 pikseli, to aby uzyskać ten 45 pikseli, aby miał 640 pikseli
Następnie musisz ustawić przesunięcie. Komplikacja przesunięcia polega na tym, że 0% jest wyrównane do lewej, a 100% do prawej.
Jako programista grafiki spodziewałbym się, że przesunięcie 100% przesunie tło o 100% w poprzek elementu, innymi słowy całkowicie z prawej strony, ale nie to oznacza 100% w przypadku użycia z
backgrouhnd-position
.background-position: 100%;
oznacza wyrównanie do prawej. Więc forumla do wzięcia tego pod uwagę po skalowaniu toZałóżmy, że przesunięcie wynosi 31 pikseli
Oto obraz 640x480 z 2 duszkami.
Zgodnie z powyższą matematyką dla duszka 1
źródło
Stary post, ale oto, co zrobiłem, używając
background-size:cover;
(wskazówka do @Ceylan Pamir) ...PRZYKŁAD ZASTOSOWANIA
Płetwa w kształcie koła poziomego (najedź na obraz z przodu, obróć do tyłu z innym obrazem).
PRZYKŁAD SPRITE
480px x 240px
PRZYKŁADOWY ROZMIAR KOŃCOWY
Pojedynczy obraz o wymiarach 120 x 120 pikseli
KOD OGÓLNY
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}
.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}
SKRÓCONA OBUDOWA FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/
źródło
spróbuj użyć rozmiaru tła: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
czy jest coś, co powstrzymuje Cię przed renderowaniem obrazów w pożądanym rozmiarze?
źródło
background-size
jest CSS 3 i nie jest jeszcze szeroko obsługiwany.Zajęło mi trochę czasu, zanim stworzyłem rozwiązanie tego problemu, z którego byłem zadowolony:
Problem:
Sprite SVG z ikonami - powiedzmy 80px x 3200px
Chcemy skalować każde ich użycie w selektorach treści (: przed /: po) w różnych miejscach w różnych rozmiarach bez ponownego definiowania współrzędnych każdego duszka na podstawie używanego rozmiaru.
To rozwiązanie pozwala więc na użycie tych samych współrzędnych sprite'a w
<button>
a,<menuitem>
podczas gdy nadal go skalujesz .Używając wartości procentowych (do 2 miejsc po przecinku) w pozycji tła, a nie rozmiaru tła, jak sugerują inni tutaj, możesz skalować tę samą deklarację ikony do dowolnego rozmiaru, bez konieczności ponownego deklarowania.
Wartość procentowa pozycji-y to oryginalna wysokość / wysokość ikony duszka w% - w naszym przypadku tutaj 80px * 100 / 3200px == każdy duszek jest reprezentowany przez pozycję y na poziomie 2,5%.
Jeśli masz stany najechania / najechania myszą, możesz podwoić szerokość sprite i określić we współrzędnej position-x.
Wadą tego podejścia jest to, że dodanie większej liczby ikon w późniejszym terminie zmieni wysokość sprite'a, a więc pozycję y%, ale jeśli tego nie zrobisz, współrzędne sprite'a będą wymagały zmiany dla każdej wymaganej skalowanej rozdzielczości.
źródło
Cóż, myślę, że znalazłem prostsze rozwiązanie do skalowania obrazów: przykład - powiedzmy, że istnieje obraz z 3 sprite'ami o jednakowych rozmiarach, których chciałbyś użyć, użyj CSS do skalowania obrazu
a następnie określ niestandardową wysokość i szerokość, które należy zastosować do elementu HTML, np .:
Przykładowy kod wyglądałby mniej więcej tak:
Jestem całkiem nowy w css, a stylizacja nie jest moim najlepszym obszarem, może to być zły sposób robienia tego .. ale zadziałało dla mnie w Firefox / Chrome / Explorer 10, mam nadzieję, że działa też w starszych wersjach ..
źródło
Użyj
transform: scale(...);
i dodaj dopasowanie,margin: -...px
aby skompensować wolną przestrzeń od skalowania. (możesz użyć,* {outline: 1px solid}
aby zobaczyć granice elementów).źródło
2018 tutaj. Użyj rozmiaru tła z wartością procentową.
ARKUSZ:
Zakłada się pojedynczy rząd duszków. Szerokość twojego arkusza powinna być liczbą podzielną po równo przez 100 + szerokość jednego duszka . Jeśli masz 30 sprite'ów o wymiarach 108x108 pikseli, dodaj dodatkowe puste miejsce na końcu, aby uzyskać końcową szerokość 5508 pikseli (50 * 108 + 108).
CSS:
HTML:
źródło
Użyj
transform: scale(0.8);
z potrzebną wartością zamiast 0,8źródło
Ustaw szerokość i wysokość, aby otoczyć element obrazu sprite. Użyj tego css.
źródło
Łatwe ... Używanie dwóch kopii tego samego obrazu o różnej skali na arkuszu duszka. Ustaw współrzędne i rozmiar w logice aplikacji.
źródło