06：使用 SVG - SVG 作为背景图片

SVG 图片也可以用作 CSS 中的 background-image，就像 PNG、JPG 或 GIF 一样。

.element {
  background-image: url(/images/image.svg);
}

SVG 的所有优点都随之而来，例如灵活性并保持清晰度。此外，您可以执行光栅图形可以执行的任何操作，例如重复。

在此视频中，我们查看了如何通过伪元素上的 background-image 将“撕裂纸张边缘”效果应用于模块底部。这是一种巧妙的方法，使主要元素本身可以具有与页面背景匹配的纯色背景，并让页面背景透过 SVG 中的负空间。此外，无需任何标记即可完成此操作。

Denny Tsai

# 2016年2月19日

你好，
我只是想知道 CSS 文件中的这个 40%px 是不是打字错误，或者它是否有某种含义？

article {
  background: white;
  width: 40%px;
  padding: 20px;
  position: relative;
}

Chris Coyier

评论永久链接# 2016年2月19日

绝对是打字错误！谢谢。
Humphreto

评论永久链接# 2019年8月24日

是的，它会混淆浏览器，因此它将呈现错误（无效属性）。您可以写 40px 或 40%。“px”和“%”都是单位。一次只能使用其中一个 :)
Jelle

评论永久链接# 2021年5月22日

我不知道这个。感谢分享，Chris

Giulia

# 2016年7月26日

太棒了！

Michael Wright

# 2019年3月20日

谢谢这个！

Matt Gregg

# 2019年8月16日

这个的浏览器支持情况如何？

Rahul

# 2020年7月2日

如何将该 SVG 颜色从白色更改为其他颜色？

David Spector

# 2021年5月23日

可以使用 HTML 代码中定义的 svg 元素的“use”指定背景图像吗？

可以使用 CSS 内联指定它们

background: url(‘data:image/svg+xml;utf8,<svg…

为什么不能在一篇文章中包含所有显示图标作为背景图像的各种方法？

评论