将 inline-svg 设置为 div 的背景
Set inline-svg as the background of a div
我在 CSS 网格上找到了一个位置，我要在其中插入一段大约 15 个字符长的段落，我想向其中添加一个背景元素，我希望它具有一些个性，所以我正在使用内联 SVG 内容。
我尝试将其放置在 bottom 处 position:relative，但是当您更改视口大小时，它无法很好地缩放。我将 SVG 代码包装在一个容器中：
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
SVG 的样式：
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
这是 HTML 标记
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%"/>
<div class="main-content">
<div class="marquee-container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;"
xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat
maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
我的项目位于 CSS 网格布局中，其中 post 是我用来设置段落内容样式的 class。它不在任何 grid-template-areas 内，它只是一个已定义区域内的 class。
.post {
text-align: left;
position: relative;
z-index: 1;
}
所以缩放效果不佳，我想将元素放在要包含的段落的背景中，最好的方法是什么？
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
因为您绝对定位 .marquee-container。
您需要父级将位置设置为 relative，因此，在父级 .main-content.
上添加 position: relative
我不明白为什么要将 .marquee-container 高度设置为 0。
我建议将它的 height 设置为 auto 并有一个 bottom: 0;，（因为你希望它与容器底部对齐）。
将 width 设置为 100% 因为您希望它是可扩展的。还要添加一个负数 z-index，这样元素就不会掩盖内容。
检查下面的代码段。
.main-content {
position: relative;
}
.marquee-container {
position: absolute;
bottom: 0;
height: auto;
width: 100%;
z-index: -5;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
我在 CSS 网格上找到了一个位置，我要在其中插入一段大约 15 个字符长的段落，我想向其中添加一个背景元素，我希望它具有一些个性，所以我正在使用内联 SVG 内容。
我尝试将其放置在 bottom 处 position:relative，但是当您更改视口大小时，它无法很好地缩放。我将 SVG 代码包装在一个容器中：
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
SVG 的样式：
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
这是 HTML 标记
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%"/>
<div class="main-content">
<div class="marquee-container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;"
xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat
maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
我的项目位于 CSS 网格布局中，其中 post 是我用来设置段落内容样式的 class。它不在任何 grid-template-areas 内，它只是一个已定义区域内的 class。
.post {
text-align: left;
position: relative;
z-index: 1;
}
所以缩放效果不佳，我想将元素放在要包含的段落的背景中，最好的方法是什么？
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
因为您绝对定位 .marquee-container。
您需要父级将位置设置为 relative，因此，在父级 .main-content.
position: relative
我不明白为什么要将 .marquee-container 高度设置为 0。
我建议将它的 height 设置为 auto 并有一个 bottom: 0;，（因为你希望它与容器底部对齐）。
将 width 设置为 100% 因为您希望它是可扩展的。还要添加一个负数 z-index，这样元素就不会掩盖内容。
检查下面的代码段。
.main-content {
position: relative;
}
.marquee-container {
position: absolute;
bottom: 0;
height: auto;
width: 100%;
z-index: -5;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>