使用 :before CSS 伪元素将图像添加到模态

Question

我有一个 CSS 类 Modal，它是绝对定位的，z-indexed 在它的父级之上，并且与 JQuery 很好地定位。我想在模态框的顶部添加一个插入符号图像 (^)，并且正在考虑使用 :before CSS 伪选择器来干净地执行此操作。

图像需要绝对定位并在模态上方进行z索引，但我还没有找到任何方法在content属性中为图像添加适当的类：

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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