伪元素背景图片不出现

Question

我有一个带有三角形边框的 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

Answer 1

这里有两点需要注意：

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

下面是最终片段（包含高度、宽度和位置的示例值）：

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

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

下面是使用旋转伪元素（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%;
}

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

Answer 2

请试试这个；

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

Answer 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 太多，没用。

伪元素背景图片不出现

Pseudo-element background image doesn't appear

html

css

pseudo-element

css-shapes