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

我有一个 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;
}

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

554901 次浏览
小开

您应该使用 back 属性为该元素提供一个图像，我将使用: : after 而不是 before，这样它应该已经绘制在元素的顶部。

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

浏览器中的内容和之前都是高度不可靠的。我建议坚持使用 jQuery 来实现这一点。我不确定你是否需要添加这个胡萝卜，但是你应该有一个大致的想法:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
小开
最佳答案

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

使用带有 content的 ::after和 ::before更好，因为它们在除了 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' />");

小开

这是我对你问题的回答。

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

提交答案