【问题标题】:Using :before CSS pseudo element to add image to modal使用 :before CSS 伪元素将图像添加到模态
【发布时间】: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;
}

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

【问题讨论】:

    标签: css modal-dialog pseudo-element


    【解决方案1】:

    http://caniuse.com/#search=::after

    ::after::beforecontent 更好地使用,因为它们在除 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。
    • 这个答案是错误的,因为它对跨浏览器的支持不可靠。 Contentafter/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 仍然是一个非常流行的浏览器,它不支持其中任何一个。
    • 实际上,CSSJavaScript 更好。不管浏览器有多先进,用户仍然可以禁用JavaScript...幸运的是,在这种情况下:before:after 选择器得到广泛支持; quirksmode.org/css/selectors
    猜你喜欢
    • 2017-09-26
    • 1970-01-01
    • 2018-08-07
    • 1970-01-01
    • 2015-05-06
    • 2013-10-26
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    相关资源
    最近更新 更多