使用:before CSS伪元素在模态框中添加图像

Question

我有一个CSS类Modal，它是绝对定位的，z-index在其父元素上，并使用JQuery很好地定位。 我想在模态框的顶部添加一个插入符号图像（^），并考虑使用:before CSS伪选择器来实现清晰的效果。

该图像需要绝对定位并在模态框的上方具有z-index，但我没有找到在content属性中添加相应类的任何方法：

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

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

第二好的选择- 我能在内容属性中内联添加样式吗？

- RSG

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;
}

如果不行的话，你能否再解释清楚一些？

或者像Joshua所说，你可以使用jQuery： $(".Modal").before("");

- android.nick

---

这个。Joshua 关于浏览器兼容性方面的观点也是正确的- IE8 可以渲染 :after 内容中的图像，但不会渲染超出父元素边框之外的部分。 - RSG

现在（2017年），IE 11是微软仍然支持的唯一版本；因此，担心IE8兼容性没有太大意义。此外，CSS解决方案几乎总是比jQuery解决方案更好，因为它们往往加载速度更快，而jQuery可能会在页面加载后重写布局，导致屏幕闪烁。 - Nosajimiki

@Nosajimiki，你是否需要担心旧版浏览器主要取决于你的访问者。 - Jose Faeti

Answer 2

你应该使用background属性为该元素添加一个图片，而我会使用:: after而不是before，这样就可以在你的元素顶部绘制它。

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

- Jose Faeti

---

谢谢您的建议-模态框有一个边框，因此我认为我无法使用背景图像将箭头图像定位在所需的边框/背景颜色上方。 - RSG

为什么不呢？如果您绝对定位伪元素，就可以使用边距将其移动。它将绘制在其他元素的边框和/或背景颜色之上。 - Jose Faeti

背景图片不能超出 div 的边框？ - RSG

为了让它显示出来，你可能需要添加一个 content:''; 的内容。 - Willster

display:block很重要，我之前复制了一个普通div的样式。它没有display:block，只有在我添加了display:block后才能正常工作。 - Ajay Bhasy

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;
}

- hoang thao

---

我加入了background-size: 33px 16px; background-repeat: no-repeat;来缩放图像！ - Hasse Björk

Answer 4

Content和before在不同浏览器中都极不可靠。我建议使用jQuery来完成这个任务。我不确定您是如何确定是否需要添加这个字符的，但是您应该能够理解整体思路：

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

- Joshua

---

这让我感到悲伤。我们只需要有限的一组目标浏览器，所以我仍然对CSS的可能性感兴趣。 - RSG

即使在CSS3中广泛使用，但据我所见，它仍然是那些没有得到完全支持的内容之一。我认为这与某些人担心能够注入恶意内容有关。此外，我认为内容需要一个已经存在的元素来注入 - 不确定我是否可以单独操纵DOM。 - Joshua

这个回答关于“:after”在各种浏览器的支持不可靠是错误的。实际上，“Content”和“after/before”在每个主要浏览器中都非常可靠，从ie8开始就可以使用，至少FF3.5，至少Chrome 9，至少Opera 10.6，至少Safari 3.2，每个版本的iOS Safari、Opera mini、Opera Mobile和Android浏览器都支持。如果你想知道某个东西在各种浏览器中是否被支持，请查看网站http://caniuse.com/#search=:after。 - android.nick

仅仅因为互联网上说了，就不代表它是真的。要与它们一起工作，因为它们在每个浏览器中的行为都不同。而IE 7仍然是非常流行的浏览器，它也不支持它们中的任何一个。 - Joshua

在这种情况下，使用CSS比使用JavaScript更可取。无论浏览器有多先进，用户仍然可能禁用JavaScript。幸运的是，在这种情况下，:before和:after选择器得到了广泛支持；http://www.quirksmode.org/css/selectors/ - Steve Buzonas