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

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

99 голосов
/ 12 июля 2011

У меня есть 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;
}

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

Ответы [ 4 ]

150 голосов
/ 25 июля 2011

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

:after и :before с 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' />");

30 голосов
/ 12 июля 2011

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

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
11 голосов
/ 22 июля 2014

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

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
0 голосов
/ 12 июля 2011

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

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