Question

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

问题是图像没有显示出来。当我在浏览器工具中检出元素时，根本就有no :: 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/

问题不在于伪元素，我可以将内容添加到::之前它可以正常工作：https://jsfiddle.net/fcwp29qw/1/

背景图片格式也没有问题，我可以将它添加到元素本身而不是::之前它可以工作：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;
}

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

1 个答案: