Pytanie Używanie: przed pseudo elementem CSS do dodania obrazu do modalu


Mam klasę CSS Modal który jest pozycjonowany absolutnie, z-indeksowany powyżej jego rodzica i ładnie pozycjonowany z JQuery. Chcę dodać obraz karetki (^) na górze okna modalnego i szukałem przy użyciu :before CSS pseudo selector, aby zrobić to czysto.

Obraz musi być bezwzględnie umieszczony i z-indeksowany powyżej modalu, ale nie znalazłem żadnego sposobu na dodanie odpowiedniej klasy do obrazu w content atrybut:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Druga najlepsza opcja - czy mogę dodać style w linii w atrybucie treści?


76
2017-07-12 17:40


pochodzenie


Musisz przestać nazywać to "marchewką". - thirtydot
@thirtydot To jest problem z językami, które się nie toczą Rs ^ _ ^ - Petruza


Odpowiedzi:


http://caniuse.com/#search=:after

:after i :before z content są w porządku, ponieważ są obsługiwane w każdej większej przeglądarce innej niż Internet Explorer co najmniej 5 wersji wstecz. Internet Explorer ma pełne wsparcie w wersji 9+ i częściowe wsparcie w wersji 8.

Czy tego właśnie szukasz?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Jeśli nie, czy możesz wyjaśnić trochę lepiej?

lub możesz użyć jQuery, jak powiedział Joshua:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");


129
2017-07-25 09:51



To. Również punkt widzenia Joshuy na temat kompatybilności przeglądarek - IE8 renderuje obraz w treści: after, ale nie renderuje jego części, które znajdują się poza granicą rodzica. - RSG
Teraz (w 2017 r.) IE 11 jest jedyną wersją IE nadal obsługiwaną przez Microsoft; więc nie ma sensu martwić się o zgodność z IE8. Ponadto rozwiązanie CSS jest prawie zawsze lepsze niż rozwiązanie jQuery, ponieważ zazwyczaj ładuje się znacznie szybciej, a jQuery może powodować migotanie ekranu, przepisując układ po wczytaniu strony. - Nosajimiki
@Nosajimiki, czy powinieneś martwić się o starszych przeglądarek zależy głównie od użytkowników. - Jose Faeti


Powinieneś użyć atrybutu background, aby nadać obraz temu elementowi, a użyłbym :: after zamiast wcześniej, w ten sposób powinien być już narysowany na twoim elemencie.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

21
2017-07-12 17:46



Dzięki za sugestię - modal ma ramkę, więc nie sądzę, żebym mógł użyć obrazu tła, aby umieścić obraz marchewki nad kolorem / kolorem bg, w razie potrzeby. - RSG
Dlaczego nie? jeśli całkowicie umieścisz ten pseudo element, możesz go przesunąć marginesami. Zostanie narysowany na wierzchu innych obramowań elementów i / lub koloru bg. - Jose Faeti
Obraz tła nie może rozciągać się poza granicę div? - RSG
Prawdopodobnie musisz dodać treść: ""; do tego, aby się pojawił - Willster


1. to jest moja odpowiedź na twój problem.

.ModalCarrot::before {
content:'';
background: ('blackCarrot.png');/*url of image*/
height: 16px;/*height of image*/
width: 33px;/*width of image*/
position: absolute;
}

10
2017-07-22 17:16



dodałem background-size: 33px 16px; background-repeat: no-repeat; skalować obraz! - Hasse Björk


Zawartość i wcześniej są bardzo niewiarygodne w różnych przeglądarkach. Proponuję trzymać się z jQuery, aby to osiągnąć. Nie jestem pewien, co robisz, aby dowiedzieć się, czy ta marchewka musi zostać dodana czy nie, ale powinieneś uzyskać ogólny pomysł:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

-4
2017-07-12 17:48



To mnie smuci. Mamy na szczęście ograniczony zestaw ukierunkowanych przeglądarek, więc nadal interesuje mnie to, co jest możliwe w CSS. - RSG
Nawet jeśli treść jest intensywnie używana w CSS3, z tego, co widziałem, wciąż jest jedną z tych, które nie są w pełni obsługiwane nigdzie. Uważam, że ma to związek z pewnym lękiem przed wstrzykiwaniem złych rzeczy. Sądzę też, że treść wymaga już istniejącego elementu do wprowadzenia - nie jestem pewien, czy mogę samodzielnie manipulować DOMem. - Joshua
Ta odpowiedź jest błędna, ponieważ ma niewiarygodne wsparcie dla różnych przeglądarek. Content i after/before są bardzo niezawodne w każdej głównej przeglądarce, działa od 8, przynajmniej FF3.5, przynajmniej Chrome 9, przynajmniej Opera 10.6, przynajmniej Safari 3.2, każda wersja Safari na iOS, każda wersja Opera mini, każda wersja Opera Mobile i zawsze wersja przeglądarki Android. jeśli chcesz wiedzieć, czy coś jest obsługiwane w różnych przeglądarkach, sprawdź: caniuse.com/#search=:after - android.nick
To, że internet mówi, że tak jest, nie oznacza, że ​​to prawda. Pracuj z nimi, działają inaczej w każdej przeglądarce. I IE 7 wciąż jest bardzo popularną przeglądarką, która nie obsługuje żadnego z nich. - Joshua
Właściwie lepiej ci będzie CSS koniec JavaScript na tej. Bez względu na to, jak bardzo krwawi przeglądarka, użytkownik nadal może mieć JavaScript niepełnosprawnych ... Na szczęście w tym przypadku :before i :after selektory są szeroko obsługiwane; quirksmode.org/css/selectors - Steve Buzonas