如何使用Unicode字符代替背景图片？

Question

我希望能够在 CSS 中将 background-image:url(image.png) 用 Unicode 字符或图标 "\xxxxx" 替换掉。

如何实现呢？

- MrQd

Answer 1

如何使用伪元素？

我建议使用。

:before

宽度 z-index: -1;

查看我的示例：https://jsfiddle.net/oyq47zsj/

我使用了"A"作为背景，但你可以使用任何字符

- Paweł Michalski

---

很好，或者，如果 OP 希望背景随内容缩放（如 background-size: contain），可以尝试类似于 这个 的方法。 - Mr Lister

这里使用的另一个重要部分是CSS中的content键。 - sebix

感谢Pawel和Lister先生，我刚刚做了一些很酷的东西，都归功于你们的代码片段 :) - sodimel

如果您正在尝试设置下拉菜单的箭头，请注意在Firefox中无法使用:before和:after方法。 - nicbou

Answer 2

我们可以将包含<text>的SVG作为data URL传递，就像这样：

body {
  height: 100vh;
  background: #272b2d;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.8em' font-size='100'></text></svg>");
  background-size: cover;
}

- NVRM