：之前和背景图像......它应该有效吗？

Question

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

Answer 1

@michi;在height伪类

中定义before

CSS：

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

Answer 2

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

以下是一个示例：http://jsfiddle.net/namas/3/

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

Answer 3

此处其他答案的问题是他们使用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%;
}

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

Answer 4

 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;
    }

Answer 5

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

Answer 6

您可以为内容道具设置图片网址，而不是背景图片。

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