[英]CSS Grid with SVG Background
I am using CSS Grid, which works great, but want to have a background SVG that the grid sits on top of.我正在使用 CSS 网格,效果很好,但想要网格位于其上的背景 SVG。
For example, here is the HTML:例如,这里是 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>
...and the CSS: ...和 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);
}
...which obviously only places the SVG in the top row. ...显然只将 SVG 放在第一行。 How can I sit the SVG behind the grid?
我怎样才能让 SVG 坐在格子后面? I also tried wrapping the wrapper with a div and seeing the position to absolute.
我还尝试用 div 包装包装器并将 position 设为绝对值。
Should look like this (svg wave in blue, grid items in pink):应该看起来像这样(蓝色的 svg 波浪,粉红色的网格项目):
Using the wrapper approach:使用包装方法:
position: relative
.position: relative
创建一个包装器元素。svg
element with position: absolute
and top: 0
, right: 0
, etc...svg
元素position: absolute
和top: 0
, right: 0
等...position: relative
.position: relative
的网格元素。 The wrapper having position: relative
allows the svg
to size itself using the wrapper as its parent.具有
position: relative
允许svg
使用包装器作为其父级来调整自身大小。 The position: relative
on the grid creates a new stacking context above the svg
which also has its own stacking context thanks to position: absolute
.网格上的
position: relative
在 svg 之上创建了一个新的堆叠上下文,由于svg
position: absolute
,它也有自己的堆叠上下文。
Here's a demo:这是一个演示:
.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>
A lot less HTML and CSS when you place your SVG in the .grid background
当您将 SVG 放在
.grid background
中时,HTML 和 CSS 会少很多
Convert your SVG to CSS in: https://yoksel.github.io/url-encoder/在https://yoksel.github.io/url-encoder/ 中将您的 SVG 转换为 CSS
Only drawback: You can't style the SVG with CSS, you have to fill
the SVG path with an attribute.唯一的缺点:您不能将 SVG 设置为 CSS,您必须使用属性
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.