web-dev-qa-db-ja.com

疑似要素の背景画像が表示されない

三角形の境界線が付いた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 です

htmlcsspseudo-elementcss-shapes
12
Radu

ここで注意すべき点が2つあります。

  1. Web-tikiがコメントで述べたように、疑似要素のwidthとheightは100%に設定され、親要素のサイズは0px x 0px（三角形のため国境ハックを通じて生成された）。このため、子（疑似要素）の実際の計算された寸法も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>
14
Harry

これを試してください。

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

この場合、疑似要素の高さと幅を％ではなく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のサイズはxです。したがって、100％heightおよびwidthpsuedo要素にすると、それらの寸法は最終的にxにもなり、これも役に立たないでしょう。

0
Dhruvil21_04