使用：在CSS伪元素之前添加图像到模态 [英] Using :before CSS pseudo element to add image to modal

问题描述

我有一个CSS类 Modal 它是绝对定位，z-indexed它的父，并且很好地定位与JQuery。我想添加一个插入符号（^）到模态框的顶部，并正在使用：之前 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-index高于模态，但我没有找到任何方法添加适当的类到图像中的 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;
}

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

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 okay 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.

这是您要查找的内容吗？

Is this what you're looking for?

.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 < img src ='blackCarrot.png'class ='ModalCarrot'/>）;

这篇关于使用：在CSS伪元素之前添加图像到模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！