Próbuję użyć :before
selektora, aby umieścić obraz na innym obrazie, ale okazuje się, że po prostu nie działa umieszczenie obrazu przed img
elementem, a tylko innym elementem. W szczególności moje style to:
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
i uważam, że to działa dobrze:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
ale to nie:
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
Mogę użyć elementu div
lub p
zamiast tego span
, a przeglądarka poprawnie nakłada mój obraz na obraz w img
elemencie, ale jeśli zastosuję klasę nakładki do img
siebie, to nie zadziała.
Chciałbym, aby to działało, ponieważ to span
mnie obraża, ale co ważniejsze, mam około 100 postów na blogu, które chciałbym zmodyfikować, i mogę to zrobić za jednym razem, jeśli tylko mogę zmodyfikować arkusz stylów, ale jeśli będę musiał wrócić i dodać dodatkowy span
element między elementami a
i img
, będzie to o wiele więcej pracy.
Odpowiedzi:
Niestety większość przeglądarek nie obsługuje używania tagów img
:after
ani ich używania:before
.http://lildude.co.uk/after-css-property-for-img-tag
Możliwe jest jednak osiągnięcie tego, czego potrzebujesz za pomocą JavaScript / jQuery. Sprawdź to skrzypce:
http://jsfiddle.net/xixonia/ahnGT/
Edytuj :
Z tego powodu nie jest to obsługiwane, sprawdź odpowiedź Coreyward .
źródło
Pseudo-selektory przed i po nie wstawiają elementów HTML - wstawiają tekst przed lub po istniejącej zawartości elementu docelowego. Ponieważ elementy obrazu nie zawierają tekstu lub mieć potomków, ani
img:before
czyimg:after
będzie Pan jakieś dobre. Dotyczy to również elementów takich jak<br>
iz<hr>
tego samego powodu.źródło
content: url(/img/foo.jpg);
składni. Szczegółowe informacje można znaleźć na w3.org/TR/CSS21/generate.html .Znalazłem sposób, aby to działało w czystym css:
Jestem po prostu fałszywe treści -method
czysta metoda CSS, która umożliwia img: after.
Możesz sprawdzić CodePen: Jestem tylko fałszywą treścią lub zobaczę źródło .
Źródło i fragment
Obsługa przeglądarki
✓ Chrome 10+
✓ Firefox 11+
✓ Opera 9.8+
✓ Safari
Bez wsparcia
⊗ Internet Explorer 8/9
Testuj w innych przeglądarkach
źródło
Ze względu na charakter
<img>
bycia zastąpiony elementem , stylizacja dokument nie dotyczy go.W każdym razie, aby się do niego odwołać,
<picture>
zapewnia idealne, natywne opakowanie, do którego mogą być dołączone pseudoelementy:źródło
Oto inne rozwiązanie wykorzystujące pojemnik div dla img podczas używania
:hover::after
do osiągnięcia efektu.HTML w następujący sposób:
CSS w następujący sposób:
Aby zobaczyć to w akcji, sprawdź skrzypce , które utworzyłem. Tylko dlatego, że wiesz, że jest przyjazny dla różnych przeglądarek i nie ma potrzeby oszukiwania kodu za pomocą „fałszywych treści”.
źródło
display: inline-block
do#img_container
. Dzięki temu szerokość pojemnika będzie równa obrazowi przy wszystkich rozmiarach ekranu. Tak więc nie kończy się to, że:after
treść unosi się poza obrazem.Myślę, że najlepszym sposobem na sprawdzenie, dlaczego to nie działa, jest: przed i po wstawieniu ich zawartości przed lub po treści w tagu, do którego je zastosujesz. Działa więc z divami lub rozpiętościami (lub większością innych tagów), ponieważ możesz umieszczać w nich zawartość.
Img jest jednak samodzielnym, samozamykającym się znacznikiem, a ponieważ nie ma oddzielnego znacznika zamykającego, nie można w nim niczego umieścić. (To musiałoby wyglądać
<img>Content</img>
, ale oczywiście to nie działa.)Wiem, że to stary temat, ale najpierw pojawia się w Google, więc mam nadzieję, że pomoże to innym się uczyć.
źródło
Ten działa dla mnie:
HTML
CSS
źródło
Pseudoelementy generowane przez :: before i :: after są zawarte w polu formatowania elementu, a zatem nie dotyczą elementów zastępowanych, takich jak img, ani elementów br.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
źródło
::after
może być użyty do wyświetlenia zastępczego obrazuZobacz poniższy przykład, pierwsze 2
img
tagi wskazują uszkodzone adresy URL. Ale drugi wyświetla obraz zastępczy zamiast domyślnego zepsutego logo z przeglądarki. Jednak nie jestem pewien, czy to jest praktyczne, uważam, że jest to dość trudne, aby dobrze działało.źródło
Wypróbuj ten kod
źródło
Próbowałem i znalazłem prostszą metodę, aby to zrobić. Oto HTML:
To, co zrobiłem, to umieszczenie pustego
<p>
tagu za tagiem graficznym. Teraz użyję p :: before, aby wyświetlić obraz i ustawić go zgodnie z moimi potrzebami. Oto CSS:Spróbuj.
źródło
Spróbuj :: po na poprzednim elemencie.
źródło