У меня есть класс 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;
}
Второй лучший вариант - могу ли я добавить встроенные стили в атрибут содержимого?
Вы должны использовать атрибут background, чтобы дать изображение этому элементу, и я бы использовал :: after вместо before, таким образом он должен быть уже нарисован поверх вашего элемента.
источник
1. это мой ответ на вашу проблему.
источник
background-size: 33px 16px; background-repeat: no-repeat;
масштабировать изображение!Контент и более ранние версии крайне ненадежны в разных браузерах. Для этого я бы посоветовал придерживаться jQuery. Я не уверен, что вы делаете, чтобы понять, нужно ли добавлять эту морковку или нет, но вы должны получить общее представление:
источник
Content
иafter/before
очень надежны во всех основных браузерах, они работают с IE8, по крайней мере, FF3.5, по крайней мере, Chrome 9, по крайней мере, Opera 10.6, по крайней мере Safari 3.2, каждой версии iOS Safari, каждой версии Opera mini, каждой версии Opera Mobile и любой другой версии браузера Android. если вы хотите узнать, поддерживается ли что-то в кросс-браузере, посмотрите: caniuse.com/#search=:afterCSS
закончитьJavaScript
с этим. Независимо от того , как кровотечения края браузера, пользователь все еще может иметьJavaScript
инвалид ... К счастью , в этом случае:before
и:after
селекторы широко поддерживаются; quirksmode.org/css/selectors