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

我有一个绝对定位的CSS类Modal ,在它的父级上面z-索引,并很好地与JQuery定位。 我想添加一个脱口秀图片(^)到模式框的顶部,并且正在使用:before CSS伪select器:before干净地做这个。

该图像需要绝对定位和模式上方的z-indexed,但我还没有find任何方法来添加适当的类到content属性中的图像:

 .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } 

第二个最佳select – 我可以在内容属性中内联添加样式吗?

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

:after :before和之后的content都可以使用,因为它们在Internet Explorer以外的每个主要浏览器中都至less支持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' />");

你应该使用背景属性给这个元素的图像,我会使用::之后而不是之前,这样它应该已经绘制在您的元素之上。

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

这是我对你的问题的回答。

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

内容和之前在浏览器中都是非常不可靠的。 我会build议坚持与jQuery来完成这一点。 我不知道你在做什么来弄清楚这个胡萝卜是否需要添加,但你应该得到这个总体的想法:

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