如何将背景图像（png 图像格式）添加到带有伪元素 ::before 的 div

Question

我试过将图片的路径直接放到内容中。然后，也使用背景和其他几个属性，但还没有让它们出现。

这是我的 HTML:

<div class="side-links-container">
   <div class="side-link search">
     <a href="#"></a>
   </div>
   <div class="side-link questions">
      <a href="#"></a>
    </div>
    <div class="side-link contact">
      <a href="#"></a>
    </div>
</div>

我的CSS：（我用.scss）

    .side-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: #249987;


  &.search a {

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: url('../dist/res/img/Lupe-side-menu.png') no-repeat;
    }
  }
}

Answer 1

我不能立即看出问题 - 我认为唯一的可能是你的背景图片路径错误或者你只看到背景的一小部分（因为元素的宽度和高度为 4.5 em).

我将 SCSS 翻译成 CSS 以防 SCSS 出现问题，但似乎没有。这是一个带有完整路径背景图像的工作片段 url。尝试为您的图片添加一个完整路径 URL，看看会发生什么。然后尝试再次使其相对。背景大小也设置为覆盖，因此我们可以看到合理数量的图像。

.side-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: #249987;
}

.side-link.search a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(https://picsum.photos/id/1016/1024/768) no-repeat;
  background-size: cover;
}

<div class="side-links-container">
  <div class="side-link search">
    <a href="#"></a>
  </div>
  <div class="side-link questions">
    <a href="#"></a>
  </div>
  <div class="side-link contact">
    <a href="#"></a>
  </div>
</div>

如何将背景图像（png 图像格式）添加到带有伪元素 ::before 的 div

How can I add background image (png image format) to a div with pseudoelement ::before

html

css

pseudo-element