伪元素背景图像不出现 [英] Pseudo-element background image doesn't appear

问题描述

我有一个带有三角形边框的 div 元素，我试图用 :: after code>伪元素与 background-image 。该方法虽然不起作用。但是，如果我试图设置内容：asd; ，文本显示正确。基本上我只想在这个三角形上面有一个房子图像。

以下是HTML代码：

 < div id =estatecornerclass =house>< / div> 
  

这里是CSS：

  #estatecorner {
 position：absolute; 
 right：0px; 
 width：0; 
 height：0; 
 border-style：solid; 
 border-width：0 80px 80px 0; 
 border-color：透明＃67b2e4透明透明; 
} 
 
＃estatecorner.house :: after {
 position：absolute; 
宽度：100％; 
身高：100％; 
背景：url（images / mini / house.png）; 
 content：; 
} 
  

以下是 jsFiddle

解决方案

有两点值得注意： p>




1. 正如web-tiki在评论中提到的那样，宽度和<$伪元素的c $ c> height 被设置为 100％，父元素的尺寸为0px x 0px（因为三角形是通过边界黑客生成）。因此，孩子的实际计算尺寸（伪元素）也是0px x 0px，因此图像没有显示出来。当您放置纯文本时，内容确实会显示，因为文本通常会溢出。
   解决这个问题的方法是指定一个明确的高度&宽度设置为子伪元素（因为向父级分配高度和宽度会破坏边界黑客）。




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

最后一个片段（带有高度，宽度和位置的示例值）：



  #estatecorner {position：absolute; right：0px;宽度：0;身高：0; border-style：solid; border-width：0 80px 80px 0; border-color：transparent＃67b2e4 transparent transparent;}＃estatecorner.house::after {position：absolute;内容：;宽度：80px; height：80px;背景：url（http://i.imgur.com/nceI30v.png）;背景重复：不重复; background-position：75％40％;}  

<
$ b

$ b

---





以下是使用旋转伪元素（CSS3变换）代替边界黑客来实现三角形的另一种方法。





  #estatecorner {position：absolute;宽度：80px; height：80px; right：0px; overflow：hidden;}＃estatecorner：before {position：absolute;内容：'';顶部：-80px;正确：-80px;身高：138.4px;宽度：138.4px; / *（80 * 1.732px）* / background：＃67b2e4;转换：旋转（45度）; z-index：-1;}＃estatecorner.house {background-image：url（http://i.imgur.com/nceI30v.png）;背景重复：不重复; background-position：75％35％;}  

< div id =estatecornerclass =house>< / div>

I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-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.

Here's the HTML code:

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

And here's the 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

解决方案

There were two things to take note of here:

1. As web-tiki had mentioned in comments, the width and height of 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-image is 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-position property with the appropriate position values in pixels or percentages depending on the needs.

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.

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

这篇关于伪元素背景图像不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！