:before 和 background-image ......它应该工作吗？答案

【问题标题】：:before and background-image... should it work?:before 和 background-image ......它应该工作吗？
【发布时间】：2011-08-26 11:01:07
【问题描述】：

我有一个 div 并应用 :before 和 :after 图像作为内容。这完美无缺。现在我需要应用背景图像，这样它会随着div 调整大小而重复，但它似乎不起作用。 :before 和 :after 上的背景图片应该可以工作吗？

当前代码：

HTML：

<div id="videos-part">test</div>

CSS：

#videos-part{
    background-color: #fff;
    height: 127px;
    width: 764px;
    margin: -6px 0 -1px 18px;
    position: relative;
}
#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
}

【问题讨论】：

将您的代码粘贴到您的问题中。
用我的代码更新了问题
我的问题丢失了content。它需要有一些内容才能应用背景。
感谢@Neolisk...重要细节:-)
是的，但是你不能在它上面应用悬停效果。

标签： css background-image

【解决方案1】：

@michi;在 before 伪类中定义 height

CSS：

#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
    height:20px;
}

【讨论】：

嗨 Sandeep...我不能使用高度，因为 div 会根据其内容调整大小。
嗯...我刚试了放高度，出现了背景图:-(真的要用JS动态改变高度吗？
我刚刚添加了 height: 100% 并且它有效 :-) 愚蠢的我，我以前没有想到它。非常感谢桑迪普 :-)
这对我使用背景色不起作用。必须使用背景：#295b79 url('../images/image.png') no-repeat;

【解决方案2】：

:before 和 :after 元素上的背景图像应该可以工作。如果您发布一个示例，我可能会告诉您为什么它在您的情况下不起作用。

这里是一个例子：http://jsfiddle.net/namas/3/

例如，您可以使用background-size: 100% 100%（宽度/高度）以% 为单位指定元素的尺寸。

【讨论】：

嗨 Meo，我已经用我正在使用的代码更新了我的问题。感谢您的帮助:-)

【解决方案3】：

 color: transparent;

为我制造技巧

#videos-part:before{
    font-size: 35px;
    line-height: 33px;
    width: 16px;
    color: transparent;
    content: 'AS YOU LIKE';
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04LDE0TDQsNDloNDJsLTQtMzVIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zNCwxOWMwLTEuMjQxLDAtNi43NTksMC04ICBjMC00Ljk3MS00LjAyOS05LTktOXMtOSw0LjAyOS05LDljMCwxLjI0MSwwLDYuNzU5LDAsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTkiIHI9IjIiLz48L3N2Zz4=');
    background-size: 25px;
    background-repeat: no-repeat;
    }

【讨论】：

【解决方案4】：

这里其他答案的问题是他们使用position: absolute;

这使得元素本身相对于::before 伪元素的布局变得困难。例如，如果您希望在这样的链接之前显示图像：

这是我如何实现图片中的布局：

a::before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url(../../lhsMenu/images/internal_link.png) no-repeat 0 0;
  background-size: 80%;
}

请注意，此方法允许您缩放背景图像，并保留使用边距和填充进行布局的能力。

【讨论】：

【解决方案5】：

您可以为 content 属性设置图片 URL，而不是 background-image。

content: url(/img/border-left3.png);

这本身并不能解决所有问题。需要考虑使用其他属性的重复、大小、位置等。

【讨论】：

【解决方案6】：

出于某种原因，我需要将伪元素的 float 属性设置为 left 或 right 以显示图像。伪元素的height 和width 应该都设置但不是百分比。我使用的是 Firefox 67。

【讨论】：