背景 svg 图像在 ::before 伪元素中不起作用

Question

我在尝试将 svg 背景图像应用到另一个元素的 ::before 伪元素时遇到问题。

问题是图像没有显示出来。当我在浏览器工具中查看元素时，根本没有 ::before 伪元素。

这是我的 HTML：

<section class="spotlight">
  <div class="container">
    <div class="row">
      <p>Lorem ipsum dolor sit amet, etiam lorem adipiscing elit.</p>
    </div>
  </div>
</section>

还有我的 CSS：

.spotlight {
        background-color: #4c5c96;
    }

        .spotlight::before {
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
        }

我这里有个小提琴：https://jsfiddle.net/fcwp29qw/

问题不在于伪元素，我可以将内容添加到 ::before 并且效果很好：https://jsfiddle.net/fcwp29qw/1/

背景图像格式也没有问题，我可以将其添加到元素本身而不是 ::before 并且它可以工作：https://jsfiddle.net/fcwp29qw/2/

那么我在这里做错了什么？

Answer 1

你可以试试这个

.spotlight {
  background-color: #4c5c96;
  position : relative;
}

.spotlight::before {
  position : absolute;
  content: '';
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
}