伪元素背景图片不出现答案

【问题标题】：Pseudo-element background image doesn't appear伪元素背景图片不出现
【发布时间】：2015-04-23 03:48:30
【问题描述】：

我有一个带有三角形边框的div 元素，我正在尝试使用带有background-image 的::after 伪元素在其上方放置一个图像。该方法虽然不起作用。但是，如果我尝试设置 content: "asd";，则文本会正确显示。基本上我只想在那个三角形上方有一个房子图像。

这是 HTML 代码：

<div id = "estatecorner" class = "house"></div>

这是 CSS：

#estatecorner {
  position: absolute;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #67b2e4 transparent transparent;
}

#estatecorner.house::after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(images/mini/house.png);
  content: " ";
}

这是jsFiddle

【问题讨论】：

100% with/height of 0 is ... 0 所以你的伪元素的宽度/高度为 0，它的背景图片不显示
我将#estatecorner的宽度和高度设置为100px。还是不行。
really?
@Radu：this 你在找什么吗？
是的，这正是我想要的！非常感谢！您可以将其发布为答案，以便我奖励您吗？ :D

标签： html css pseudo-element css-shapes

【解决方案1】：

这里有两点需要注意：

正如web-tiki在cmets中提到的，伪元素的width和height设置为100%，父元素的尺寸为0px x 0px（因为生成了三角形通过边境黑客）。因此，子元素（伪元素）的实际计算尺寸也是 0px x 0px，因此图像没有显示出来。当您输入纯文本时，内容确实会显示出来，因为文本通常会溢出。这个问题的解决方案是为子伪元素指定一个显式的高度和宽度（因为给父元素指定一个高度和宽度会破坏边框）。
当background-image被分配给一个伪元素并且图像的尺寸比容器（伪元素）小时，背景图像会尽可能重复多次以适应容器元素.应该通过设置background-repeat: no-repeat; 来避免这种情况，并且要将图像定位在三角形内，我们必须使用background-position 属性，并根据需要使用适当的像素或百分比位置值。

下面是最终的 sn-p（带有高度、宽度和位置的示例值）：

#estatecorner {
  position: absolute;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #67b2e4 transparent transparent;
}
#estatecorner.house::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background: url("http://i.imgur.com/nceI30v.png");
  background-repeat: no-repeat;
  background-position: 75% 40%;
}

&lt;div id="estatecorner" class="house"&gt;&lt;/div&gt;

以下是使用旋转伪元素（CSS3 转换）而不是边框 hack 来实现三角形的另一种方法。

#estatecorner {
  position: absolute;
  width: 80px;
  height: 80px;
  right: 0px;
  overflow: hidden;
}
#estatecorner:before {
  position: absolute;
  content: '';
  top: -80px;
  right: -80px;
  height: 138.4px;
  width: 138.4px; /* (80 * 1.732px) */
  background: #67b2e4;
  transform: rotate(45deg);
  z-index: -1;
}
#estatecorner.house {
  background-image: url("http://i.imgur.com/nceI30v.png");
  background-repeat: no-repeat;
  background-position: 75% 35%;
}

&lt;div id="estatecorner" class="house"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

请试试这个；

 #estatecorner.house::after {
        content: url('../img/yourimage.jpg');
        position: absolute;
        left:0px;
        width: 100%;
        height: 100%;
    }

【讨论】：

你小提琴中的代码和答案中的代码一样吗？
不，我已经改变了：请从 Fiddle 拿走 :)
修改后的解决方案很好，值得一票。请删除您的其他答案，因为它本质上与您自己的答案重复。
是的，删除了其他答案。

【解决方案3】：

在这种情况下，您需要以 px 而不是 % 给出伪元素的高度和宽度。

#estatecorner.house::after {
    position: absolute;
    width: 14px;
    height: 13px;
    background: url(http://i.imgur.com/nceI30v.png) no-repeat;
    content: " ";
    left: 50px;
    top: 20px;
}

原因是#estatecorner的尺寸为0 x 0。所以，如果你给 100% height 和 width 到它的 psuedo 元素，那么它们的尺寸最终也将是 0 x 0 ，这将是无用的。

【讨论】：