Question

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

这是HTML代码：

content: "asd";

这是CSS：

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

这是jsFiddle

Answer 1

这里有两件事需要注意：

正如web-tiki在评论中提到的那样，伪元素的width和height设置为100%，父元素的维度为0px x 0px （因为三角形是通过边界黑客生成的）。因此，子项（伪元素）的实际计算尺寸也是0px x 0px，因此图像没有显示出来。当您放置纯文本时，内容确实显示，因为文本通常会溢出。这个问题的解决方案是指定一个明确的高度＆amp;子元素伪元素的宽度（因为为父元素指定高度和宽度会破坏边框黑客）。
当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>

Answer 2

请试试这个;

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

Answer 3

在这种情况下，您需要以px为单位给出psuedo元素的高度和宽度，而不是％。

#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％ 高度和宽度到 psuedo 元素，那么它们的尺寸最终也会 0 x 0 ，这将是无用的。

不出现伪元素背景图像

3 个答案: