137

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

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

4

4 回答 4

199

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' />");

于 2011-07-25T09:51:34.240 回答
46

您应该使用背景属性为该元素提供图像，并且我将使用 ::after 而不是之前，这样它应该已经绘制在您的元素之上。

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
于 2011-07-12T17:46:00.383 回答
17

1.这是我对您问题的回答。

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
于 2014-07-22T17:16:49.300 回答
-4

内容和之前的内容在浏览器中都非常不可靠。我建议坚持使用 jQuery 来实现这一点。我不确定你在做什么来确定是否需要添加这个胡萝卜，但你应该了解总体思路：

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
于 2011-07-12T17:48:39.127 回答