Załóżmy, że chcę ozdobić łącza do niektórych typów plików za pomocą obrazu. Mogę zadeklarować moje linki jako
<a href='foo.pdf' class='pdflink'>A File!</a>
wtedy mają CSS jak
.pdflink:after { content: url('/images/pdf.png') }
Teraz działa to świetnie, chyba że pdf.png
nie ma odpowiedniego rozmiaru dla mojego tekstu linku.
Chciałbym móc powiedzieć przeglądarce, aby skalowała :after
obraz, ale przez całe życie nie mogę znaleźć właściwej składni. Czy to jest jak obrazy tła, w których zmiana rozmiaru jest po prostu niemożliwa?
ETA: Skłaniam się do albo: a) zmiany rozmiaru obrazu źródłowego, aby był „odpowiedni” rozmiar, po stronie serwera i / lub b) zmiany znaczników, aby po prostu podać tag IMG w tekście. Starałem się unikać obu tych rzeczy, ale brzmią one tak, jakby były bardziej kompatybilne niż próby robienia rzeczy wyłącznie z CSS. Odpowiedź na moje pierwotne pytanie wydaje się brzmieć „ czasem możesz to zrobić”.
źródło
Odpowiedzi:
Dostosowanie
background-size
jest dozwolone. Jednak nadal musisz określić szerokość i wysokość bloku.Zobacz pełną tabelę kompatybilności w MDN .
źródło
:after
. Nie jest obsługiwany poniżej IE8.width: 10px; height: 20px;
aby zobaczyć obraz.background-image
właściwości, prostebackground
nie będzie działać.:before
) Też potrzebowałemposition: absolute
ileft: -10px
.Zauważ, że
:after
pseudoelement jest pudełkiem, które z kolei zawiera wygenerowany obraz. Nie ma sposobu na stylizację obrazu, ale możesz stylizować pudełko.Poniżej znajduje się tylko pomysł, a powyższe rozwiązanie jest bardziej praktyczne.
http://jsfiddle.net/Nwupm/
Wady: musisz znać wewnętrzne wymiary obrazu i pozostawia ci trochę białych znaków, których nie mogę pozbyć się bankomatu.
źródło
position: absolute
, aby dostać siętransform: scale(0.5)
do pracy. Musiałem także wprowadzićposition: relative
element „rodzic” (właściciel:after
pseudo) dla zachowania zdrowia psychicznego. Musiałem też dodaćtranslate(-16px, -16px)
do mojej transformacji, aby poprawnie ustawić ikonę 16x16. Maposition: absolute
również tę zaletę, że eliminuje problem białych znaków.Ponieważ moja inna odpowiedź nie była oczywiście dobrze zrozumiana, oto druga próba:
Istnieją dwa podejścia do odpowiedzi na pytanie.
Praktyczne (po prostu pokaż mi ten cholerny obraz!)
Zapomnij o
:after
pseudo-selektorze i wybierz coś takiegoTeoretyczny
Pytanie brzmi: czy możesz stylizować generowaną treść ? Odpowiedź brzmi: nie, nie możesz. Nastąpiła długa dyskusja na liście mailingowej W3C w tej sprawie, ale żadne rozwiązanie nie tak daleko.
Wygenerowana treść jest renderowana w wygenerowane pole i można nadać mu styl, ale nie treść jako taką . Różne przeglądarki wykazują bardzo różne zachowania
(z http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )
Podobnie przeglądarki wyświetlają bardzo różne wyniki dotyczące takich rzeczy, jak http://jsfiddle.net/Nwupm/1/ , gdzie generowany jest więcej niż jeden element. Należy pamiętać, że CSS3 jest wciąż na wczesnym etapie rozwoju i ten problem nie został jeszcze rozwiązany.
źródło
Powinieneś użyć tła zamiast obrazu.
źródło
diplay: block;
nie mają żadnego efektupositionin działa również bardzo dziwnie, jeśli chodzi o podstawy, więc bądź ostrożny
źródło
Oto inne (działające) rozwiązanie: po prostu zmień rozmiar swoich zdjęć do pożądanego rozmiaru :)
potrzebujesz pdf.png, aby mieć 20px * 10px, aby to działało. 20px / 10px w css są tutaj, aby podać rozmiar bloku, aby elementy, które następują po bloku, nie zostały pomieszane z obrazem
Nie zapomnij zachować kopii surowego obrazu w oryginalnym rozmiarze
źródło
źródło
Możesz skorzystać z
zoom
właściwości. Sprawdź to jsfiddleźródło
Możesz zmienić wysokość lub szerokość elementu Before lub After w następujący sposób:
źródło
Użyłem tej szerokości kontrolnej rozmiaru czcionki
źródło
Obecnie za pomocą Flexboksa możesz znacznie uprościć swój kod i dostosować tylko 1 parametr w razie potrzeby:
Teraz możesz po prostu dopasować szerokość elementu, a wysokość automatycznie się dostosuje, zwiększ / zmniejsz szerokość, aż wysokość elementu osiągnie żądaną liczbę.
źródło
url(//placeimg.com/800/200/arch)
źródło