Использование: перед псевдоэлементом CSS для добавления изображения в модальное окно

116

У меня есть класс CSS, Modalкоторый абсолютно позиционирован, проиндексирован по z над его родителем и хорошо позиционирован с помощью JQuery. Я хочу добавить изображение курсора (^) в верхнюю часть модального окна и искал использование :beforeпсевдоселектора CSS, чтобы сделать это чисто.

Изображение должно быть абсолютно позиционировано и проиндексировано по оси z над модальным окном, но я не нашел способа добавить соответствующий класс к изображению в contentатрибуте:

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

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

Второй лучший вариант - могу ли я добавить встроенные стили в атрибут содержимого?

RSG
источник

Ответы:

175

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

:afterи :beforewith contentможно использовать, поскольку они поддерживаются во всех основных браузерах, кроме Internet Explorer как минимум 5 версий назад. Internet Explorer имеет полную поддержку в версии 9+ и частичную поддержку в версии 8.

Это то, что вы ищете?

.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;
}

Если нет, не могли бы вы объяснить немного лучше?

или вы можете использовать jQuery, как сказал Джошуа:

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

android.nick
источник
2
Это. Точка зрения Джошуа о совместимости браузера также верна - IE8 отображает изображение в содержимом: after, но не будет отображать его части, которые находятся за пределами родительской границы.
RSG
Сейчас (в 2017 году) IE 11 - единственная версия IE, все еще поддерживаемая Microsoft; Итак, нет смысла беспокоиться о совместимости с IE8. Кроме того, решение CSS почти всегда лучше, чем решение jQuery, потому что они, как правило, загружаются намного быстрее, а jQuery может вызвать мерцание экрана, переписывая ваш макет после загрузки страницы.
Nosajimiki
1
@Nosajimiki, стоит ли вам беспокоиться о старых браузерах, зависит в основном от ваших посетителей.
Хосе Фаэти
35

Вы должны использовать атрибут background, чтобы дать изображение этому элементу, и я бы использовал :: after вместо before, таким образом он должен быть уже нарисован поверх вашего элемента.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
Хосе Фаэти
источник
Спасибо за предложение - у модального окна есть граница, поэтому я не думаю, что могу использовать фоновое изображение для размещения изображения моркови над цветом границы / bg по мере необходимости.
RSG
Почему нет? если вы абсолютно позиционируете этот псевдоэлемент, вы можете перемещать его с полями. Он будет нарисован поверх других границ элемента и / или цвета bg.
Jose Faeti
Фоновое изображение не может выходить за границу div?
RSG
12
Вероятно, вам нужно добавить контент: ''; чтобы это появилось
Виллстер 02
13

1. это мой ответ на вашу проблему.

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
Hoang Thao
источник
5
Я добавил background-size: 33px 16px; background-repeat: no-repeat;масштабировать изображение!
Hasse Björk
-4

Контент и более ранние версии крайне ненадежны в разных браузерах. Для этого я бы посоветовал придерживаться jQuery. Я не уверен, что вы делаете, чтобы понять, нужно ли добавлять эту морковку или нет, но вы должны получить общее представление:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
Джошуа
источник
1
Это меня огорчает. У нас есть к счастью ограниченный набор целевых браузеров, поэтому мне все еще интересно, что возможно с CSS.
RSG
Даже несмотря на то, что контент активно используется в CSS3, из того, что я видел, он остается одним из тех, которые нигде полностью не поддерживаются. Я считаю, что это связано с некоторым страхом быть способным привнести зло. Кроме того, я считаю, что контенту нужен уже существующий элемент для внедрения - не уверен, смогу ли я так сильно манипулировать DOM самостоятельно.
Джошуа
4
Этот ответ неверен, поскольку у него ненадежная поддержка в браузерах. Contentи after/beforeочень надежны во всех основных браузерах, они работают с IE8, по крайней мере, FF3.5, по крайней мере, Chrome 9, по крайней мере, Opera 10.6, по крайней мере Safari 3.2, каждой версии iOS Safari, каждой версии Opera mini, каждой версии Opera Mobile и любой другой версии браузера Android. если вы хотите узнать, поддерживается ли что-то в кросс-браузере, посмотрите: caniuse.com/#search=:after
android.nick
То, что Интернет так говорит, не означает, что это правда. Работайте с ними, в каждом браузере они действуют по-разному. И IE 7 по-прежнему остается очень популярным браузером, который не поддерживает ни один из них.
Джошуа
3
На самом деле, вам лучше CSSзакончить JavaScriptс этим. Независимо от того , как кровотечения края браузера, пользователь все еще может иметь JavaScriptинвалид ... К счастью , в этом случае :beforeи :afterселекторы широко поддерживаются; quirksmode.org/css/selectors
Стив Бузонас