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

Posted 2023-03-29

【中文标题】使用 :before CSS 伪元素将图像添加到模态

【英文标题】：Using :before CSS pseudo element to add image to modal

【发布时间】：2011-10-03 20:35:51

【问题描述】：

我有一个 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;

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

【参考方案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' />");

【讨论】：

这个。 Joshua 关于浏览器兼容性的观点也是正确的——IE8 会在 :after 内容中渲染图像，但不会渲染父边界之外的部分。

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

@Nosajimiki 您是否应该担心旧版浏览器主要取决于您的访问者。

【参考方案2】：

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

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

【讨论】：

感谢您的建议 - 模态框有边框，所以我认为我不能根据需要使用背景图像将胡萝卜图像定位在边框/bg 颜色上方。

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

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

你可能需要添加一个内容：'';让它出现

【参考方案3】：

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

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

【讨论】：

我添加了background-size: 33px 16px; background-repeat: no-repeat;来缩放图像！

【参考方案4】：

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

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

【讨论】：

这让我很难过。我们有一组非常有限的目标浏览器，所以我仍然对 CSS 的可能性感兴趣。

即使内容在 CSS3 中被大量使用，据我所见，它仍然是任何地方都没有完全支持的内容之一。我相信这与一些害怕能够注入邪恶的东西有关。另外，我相信内容需要一个已经存在的元素来注入 - 不确定我是否可以自己操纵 DOM。

这个答案是错误的，因为它对跨浏览器的支持不可靠。 Content 和 after/before 在每个主流浏览器中都非常可靠，它从 ie8 开始工作，至少 FF3.5，至少 Chrome 9，至少 Opera 10.6，至少 Safari 3.2，每个版本的 ios Safari，每个版本Opera mini、每个版本的 Opera Mobile 以及任何版本的 android 浏览器。如果您想知道是否支持跨浏览器，请查看：caniuse.com/#search=:after

只是因为互联网说它是，并不意味着它是真的。与他们合作，他们在每个浏览器中的行为都不同。而且 IE 7 仍然是一个非常流行的浏览器，它不支持其中任何一个。

实际上，CSS 比 javascript 更好。不管浏览器有多先进，用户仍然可以禁用JavaScript...幸运的是，在这种情况下:before 和:after 选择器得到广泛支持； quirksmode.org/css/selectors