使用:在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' />");