Question

为什么我的背景图像在伪元素::不显示之前？我还测试了用背景颜色替换背景图像，它仍然无法正常工作。这是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控制布局最重要的属性。每个元素都有一个默认的显示值，具体取决于它的元素类型。大多数元素的默认值通常是块或内联。块元素通常称为块级元素。

   &::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部分下面更新。如果您需要中心的背景图片，请更新背景位置。

＆＃13;

.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%;
      }

＆＃13;

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

＆＃13;

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

我不知道这是否有帮助，但是有时如果您为background属性使用快捷方式，则可能不起作用，但是如果您以不同方式使用这些属性，我认为它可能会起作用。我是凭经验说的。

.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;
}

伪元素不显示背景图像

4 个答案: