使用 :before CSS 伪元素将图像添加到模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6668577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using :before CSS pseudo element to add image to modal
提问by RSG
I have a CSS class Modalwhich 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 :beforeCSS pseudo selector to do this cleanly.
我有一个Modal绝对定位的 CSS 类，z-indexed 在它的父类之上，并且很好地与 JQuery 一起定位。我想在模态框的顶部添加一个插入符号图像 (^)，并且正在考虑使用:beforeCSS 伪选择器来干净利落地执行此操作。
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 contentattribute:
图像需要绝对定位并在模态上方进行 z-indexed，但我还没有找到任何方法将适当的类添加到content属性中的图像：
.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?
第二个最佳选择 - 我可以在内容属性中添加内联样式吗？
回答by android.nick
http://caniuse.com/#search=:after
http://caniuse.com/#search=:after
:afterand :beforewith contentare 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.
:after并:before用content都还好用，因为他们在Internet Explorer以外的所有主要的浏览器正在支持至少5个版本了。Internet Explorer 在版本 9+ 中完全支持，在版本 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?
如果不是，你能解释得更好一点吗？
or you could use jQuery, like Joshua said:
或者你可以使用 jQuery，就像 Joshua 说的：
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
回答by Jose Faeti
You should use the background attribute to give an image to that element, and I would use ::after instead of before, this way it should be already drawn on top of your element.
您应该使用 background 属性为该元素提供图像，我将使用 ::after 而不是 before，这样它应该已经绘制在您的元素之上。
.Modal:before{
content: '';
background:url('blackCarrot.png');
width: /* width of the image */;
height: /* height of the image */;
display: block;
}
回答by hoang thao
1.this is my answer for your problem.
1.这是我对你的问题的回答。
.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px; /*width of image*/
position: absolute;
}
回答by Joshua
Content and before are both highly unreliable across browsers. I would suggest sticking with jQuery to accomplish this. I'm not sure what you're doing to figure out if this carrot needs to be added or not, but you should get the overall idea:
内容和之前在浏览器中都非常不可靠。我建议坚持使用 jQuery 来实现这一点。我不确定你在做什么来弄清楚是否需要添加这个胡萝卜，但你应该了解总体思路：
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
