带有 SVG 背景的 CSS 网格

Question

我正在使用 CSS Grid，效果很好，但希望有一个背景 SVG，网格位于其顶部。

例如，这里是 HTML：

<div className="wrapper">
    <div className="item">
        <div id="wave">
            <svg viewBox="0 0 500 200" preserveAspectRatio="none"><path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z"></path></svg>
        </div>
    </div>
    <div className="item">1</div>
    <div className="item">2</div>
    <div className="item">3</div>
</div>

...和 ​​CSS：

.wrapper {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: 100vw;
    gap: 10px;
    width: 100vw;
    height: auto;
}

.item {
    background: rgba(0, 0, 0, 0.5);
}

...这显然只将 SVG 放在第一行。如何将 SVG 放在网格后面？我还尝试用 div 包装包装器并查看绝对位置。

应该看起来像这样（蓝色的 svg 波浪，粉红色的网格项目）：

Answer 1

使用包装方法：

1. 使用position: relative 创建一个包装器元素。
2. 使用position: absolute 和top: 0、right: 0 等添加svg 元素...
3. 使用position: relative 添加网格元素。

具有position: relative 的包装器允许svg 使用包装器作为其父级来调整自身大小。网格上的position: relative 在svg 之上创建了一个新的堆叠上下文，感谢position: absolute，它也有自己的堆叠上下文。

这是一个演示：

.wrapper {
  position: relative;
}

.wrapper svg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  fill: lightblue;
}

.grid {
  display: grid;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-columns: 100%;
  border: 1px solid black;
  gap: 10px;
  position: relative;
}

.item {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="wrapper">
  <svg viewBox="0 0 500 200" preserveAspectRatio="none">
    <path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z"></path>
  </svg>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

Answer 2

将 SVG 放在 .grid background 中时，HTML 和 CSS 会少很多

在https://yoksel.github.io/url-encoder/中将您的 SVG 转换为 CSS

唯一的缺点：你不能用 CSS 设置 SVG 样式，你必须 fill 带有属性的 SVG 路径。

.grid {
  display: grid;
  grid-template-rows: repeat(3,50px);
  grid-template-columns: 100%;
  border: 1px solid black;
  gap: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 200'%3E%3Cpath fill='lightblue' d='M0 92C217 193 304 8 500 109L500 0 0 0Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
}

.item {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>