不出现伪元素背景图像

Question

我有一个div带有三角边框的元素,我正在尝试使用::after伪元素在其上面放置一个图像background-image.但该方法不起作用.但是,如果我正在尝试设置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

这里有两件事需要注意:

1. 随着web-忻在评论中,提到了width与height伪元件被设置为100%与父元素具有0像素X 0像素的尺寸(因为是通过边界劈生成的三角形).因此,子项(伪元素)的实际计算尺寸也是0px x 0px,因此图像没有显示出来.当您放置纯文本时,内容确实显示,因为文本通常会溢出.这个问题的解决方案是为子伪元素指定一个显式的高度和宽度(因为为父元素指定高度和宽度会破坏边框黑客).

2. 当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变换)而不是边界黑客来实现三角形形状的替代方法.

#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>