使用:在CSS伪元素之前将图像添加到模式
使用:在CSS伪元素之前将图像添加到模式
提问于 2011-07-13 01:40:55
我有一个绝对定位的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属性中添加内联样式吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-07-25 17:51:34
http://caniuse.com/#search=::after
::after和带有content的::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，就像约书亚说的那样：
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
Stack Overflow用户
发布于 2011-07-13 01:46:00
您应该使用background属性为该元素提供一个图像，我将使用::after而不是之前，这样它应该已经绘制在您的元素之上。
.Modal:before{
content: '';
background:url('blackCarrot.png');
width: /* width of the image */;
height: /* height of the image */;
display: block;
}Stack Overflow用户
发布于 2014-07-23 01:16:49
1.这是我对你的问题的回答。
.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px; /*width of image*/
position: absolute;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6668577
复制相关文章
相似问题