偽元素不顯示背景圖像

Question

為什么我的背景圖像在偽元素 ::before 中沒有出現？ 我還測試了用背景顏色替換背景圖像，但它仍然不起作用。 這是 SASS 格式，以防有人對嵌套的 ::before 感到疑惑。

 .logoframe{ float: left; height: 817px; width: 20%; position: relative; left: -6%; transform: skewX(-11deg); border: 1px solid #e26f6f; &::before{ content: ""; background-image: url('/images/theseven/seven_img_old.png'); background-repeat: no-repeat; position: relative; height: 817px; width: 150px; } }

 <div class="logoframe"></div>

Answer 1

“顯示”屬性。 display 是 CSS 控制布局的最重要的屬性。 每個元素都有一個默認顯示值，具體取決於它是什么類型的元素。 大多數元素的默認值通常是 block 或 inline 。 塊元素通常稱為塊級元素。

   &::before{
        content: "";
        display: block;/*missing prop*/
        background-image: url('/images/theseven/seven_img_old.png');
        background-repeat: no-repeat;
        position: relative;
        height: 817px;
        width: 150px;
    }

Answer 2

您應該更新下面的 css 部分。 如果您需要在中心的背景圖像，請更新背景位置。

 .logoframe{ float: left; height: 817px; width: 20%; position: relative; left: 0; transform: skewX(-11deg); border: 1px solid #e26f6f; } .logoframe:before { content: ""; background: url('https://n2.sdlcdn.com/imgs/a/a/1/Chromozome_Yamaha_102025_m_1_2x-4ab77.jpg') 0 0 no-repeat;/* replace 0 0 to center center */ background-repeat: no-repeat; position: absolute; background-size:contain; top:0; left:0; height: 817px; width: 100%; }

 <div class="logoframe"></div>

Answer 3

Sometimes you need to add background-size property too with display: block.

&::before{
        content: "";
        background-image: url('/images/theseven/seven_img_old.png');
        background-repeat: no-repeat;
        background-size:100%;
        position: relative;
        height: 817px;
        width: 150px;
        display:block;
      }

Answer 4

我不知道這是否有幫助，但有時如果您使用背景屬性的快捷方式，它可能不起作用，但如果您以不同的方式使用這些屬性，我認為它可能會起作用。 我是根據經驗說的。

.showcase::before {
  content: '';
  background-image: url(../images/Desert.jpg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

但是這個做到了。

.showcase::before {
  content: '';
  background-image: url(../images/Desert.jpg);
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}