我正在使用 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 波浪，粉色的網格專案）：
uj5u.com熱心網友回復：
使用包裝方法：
- 使用
position: relative. - 添加
svg與元素position: absolute和top: 0，right: 0等等... - 使用
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>uj5u.com熱心網友回復：
當您將 SVG 放在 .grid background
將您的 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,");
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312331.html