Html 伪元素背景图片不出现

Pseudo-element background image doesn't appear

提问by Radu

I have a divelement with a triangle-border and I'm trying to place an image above it using an ::afterpseudo-element with background-image. The method doesn't work though. However if I'm trying to set content: "asd";, the text appears correctly. Basically I just want to have a house image above that triangle.

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

Here's the HTML code:

这是 HTML 代码：

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

And here's the CSS:

这是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: " ";
}

Here's a jsFiddle

这是一个jsFiddle

回答by Harry

There were two things to take note of here:

这里有两点需要注意：

1. As web-tiki had mentioned in comments, the widthand heightof the pseudo-element were set to 100%and the parent element had dimensions of 0px x 0px (because the triangle was generated through border hack). Because of this the actual calculated dimensions of the child (pseudo-element) were also 0px x 0px and hence the image was not showing up. The content did show up when you put plain text because text typically overflows. The solution to this problem is to assign an explicit height & width to the child pseudo-element(as assigning a height & width to the parent would spoil the border hack).

2. When background-imageis assigned to a pseudo-element and the size of the image is small compared to the container (pseudo-element), the background image is repeated as many times as possible to fit the container element. This should be avoided by setting background-repeat: no-repeat;and to position the image within the triangle we have to use the background-positionproperty with the appropriate position values in pixels or percentages depending on the needs.

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

2. 当background-image分配给一个伪元素并且图像的尺寸与容器（伪元素）相比较小时，背景图像会尽可能重复多次以适合容器元素。这应该通过设置background-repeat: no-repeat;和定位三角形内的图像来避免，我们必须根据需要使用具有以background-position像素或百分比为单位的适当位置值的属性。

Below is the final snippet (with sample values for height, width & 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>

---

---

The below is an alternate approach using a rotated pseudo-element (CSS3 transforms) instead of the border hack to achieve the triangle shape.

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

回答by Vinayak

Please try this;

请试试这个；

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

回答by Dhruvil21_04

You need to give the height and width of the psuedo elements in px and not in % for this case.

在这种情况下，您需要以 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;
}

The reasonis that #estatecornerhave dimensions of 0 x 0. So, if you give 100%heightand widthto its psuedoelements then their dimensions will eventually be 0 x 0too which would be useless.

的原因是，#estatecorner有尺寸0 X 0。因此，如果您为其伪元素提供100% 的高度和宽度，那么它们的尺寸最终也将是0 x 0，这将毫无用处。