CSS 具有 SVG 背景的网格

Question

我正在使用 CSS 网格，效果很好，但我想要一个背景 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

使用包装方法：

使用 position: relative 创建包装器元素。
添加带有 position: absolute 和 top: 0、right: 0 等的 svg 元素...
添加带有 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 会少很多

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

唯一的缺点：您不能使用 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>

CSS 具有 SVG 背景的网格

CSS Grid with SVG Background

html

css

svg

css-grid