使用:在CSS伪元素之前将图像添加到模态

Question

我有一个Modal绝对定位的CSS类,z-indexed在它的父级之上,并且很好地定位于JQuery.我想在模式框的顶部添加插入符号图像(^),并且正在使用:beforeCSS伪选择器来干净地执行此操作.

图像需要绝对定位并在模态上方进行z索引,但我没有找到任何方法将相应的类添加到content属性中的图像:

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

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

第二个最佳选择 - 我可以在内容属性中添加内联样式吗？

Answer 1

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,就像Joshua说:

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

Answer 2

您应该使用background属性为该元素提供图像,并且我将使用::之后而不是之前,这样它应该已经在元素之上绘制.

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

Answer 3

这是我对你的问题的答案.

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