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

2022-01-17 00:00:00 modal-dialog pseudo-element css

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

I have a CSS class Modal which is absolutely positioned, z-indexed above it's parent, and nicely positioned with JQuery. I want to add a caret image (^) to the top of the modal box and was looking at using the :before CSS pseudo selector to do this cleanly.

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

The image needs to be absolutely positioned and z-indexed above the modal, but I haven't found any way to add the appropriate class to the image in the content attribute:

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

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

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

Second best option- can I add the styles inline in the content attribute?

推荐答案

http://caniuse.com/#search=::之后

::after 和 ::before 与 content 更好用，因为它们在除 Internet Explorer 之外的所有主要浏览器中都受支持至少5个版本回来.Internet Explorer 在版本 9+ 中完全支持，在版本 8 中部分支持.

::after and ::before with content are better to use as they're supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 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;
}

如果不是，你能解释清楚一点吗?

If not, can you explain a little better?

或者你可以使用 jQuery，就像 Joshua 说的:

or you could use jQuery, like Joshua said:

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

相关文章