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

【问题标题】：How can I add background image (png image format) to a div with pseudoelement ::before如何将背景图像（png 图像格式）添加到具有伪元素 ::before 的 div
【发布时间】：2023-03-09 13:14:01
【问题描述】：

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

这是我的 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;
    }
  }
}

【问题讨论】：

你到底想达到什么目标。我敢打赌，有更好的方法来实现你每一次尝试做的事情。

标签： html css pseudo-element

【解决方案1】：

我无法立即发现问题 - 我认为唯一的可能是您的背景图片路径错误，或者您只看到了背景的一小部分（因为元素的宽度和高度均为 4.5em） .

我将 SCSS 翻译成 CSS 以防 SCSS 出现问题，但似乎没有。这是一个带有完整路径背景图像 url 的工作 sn-p。尝试将图像的完整路径 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>

【讨论】：