无法将 SVG 设置为背景答案

【问题标题】：Unable to Set SVG As BackGround无法将 SVG 设置为背景
【发布时间】：2021-01-15 11:30:23
【问题描述】：

我有一个 html 页面，我想将背景 jpg 图像更改为 svg，

<section class="hero-section set-bg" style="background-image: url("data:image/svg+xml,%0A%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg37' version='1.1' viewBox='0 0 200 200' height='800' width='800'%3E%3Cmetadata id='metadata41'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Crect id='rect2' height='200' width='200' fill='%23006aff' /%3E%3Cdefs id='defs29'%3E%3ClinearGradient y2='0' x2='0' y1='88' x1='88' gradientUnits='userSpaceOnUse' id='a'%3E%3Cstop id='stop4' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop6' stop-color='%23e3e3e3' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient y2='160' x2='168' y1='76' x1='75' gradientUnits='userSpaceOnUse' id='b'%3E%3Cstop id='stop9' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop11' stop-color='%23b3b3b3' offset='0.09' /%3E%3Cstop id='stop13' stop-color='%23c9c9c9' offset='0.18' /%3E%3Cstop id='stop15' stop-color='%23dbdbdb' offset='0.31' /%3E%3Cstop id='stop17' stop-color='%23e8e8e8' offset='0.44' /%3E%3Cstop id='stop19' stop-color='%23f2f2f2' offset='0.59' /%3E%3Cstop id='stop21' stop-color='%23fafafa' offset='0.75' /%3E%3Cstop id='stop23' stop-color='%23FFFFFF' offset='1' /%3E%3C/linearGradient%3E%3Cfilter height='200%25' width='200%25' y='0' x='0' id='c'%3E%3CfeGaussianBlur id='feGaussianBlur26' stdDeviation='12' in='SourceGraphic' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon id='polygon31' points='0 174 0 0 174 0' fill='url(%23a)' /%3E%3Cpath id='path33' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z' filter='url(%23c)' fill-opacity='.5' fill='%23000' /%3E%3Cpath id='path35' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z' fill='url(%23b)' /%3E%3C/svg%3E%0A");" >

</section>

当我从代码中这样做时，它不起作用并且代码转移到

background-image: url(undefined)

使用和图像设置背景效果很好，并且浏览器的设置 svg 背景也可以，但是当我在代码中使用它时却不行。

我也尝试删除类 set-bg

我认为可能存在引号问题

【问题讨论】：

如果有人需要代码，请访问 booksmotion.com 并且有一个英雄背景图像，我想将其转移到 svg（请不要投反对票，我不是在推广我的网站）

标签： html css svg background

【解决方案1】：

内引号应该是 " 并且该部分需要一个大小。

html, body, section {
  width: 100%;
  height: 100%;
}

<section class="hero-section set-bg" style="background-image: url(&quot;data:image/svg+xml,%0A%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg37' version='1.1' viewBox='0 0 200 200' height='800' width='800'%3E%3Cmetadata id='metadata41'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Crect id='rect2' height='200' width='200' fill='%23006aff' /%3E%3Cdefs id='defs29'%3E%3ClinearGradient y2='0' x2='0' y1='88' x1='88' gradientUnits='userSpaceOnUse' id='a'%3E%3Cstop id='stop4' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop6' stop-color='%23e3e3e3' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient y2='160' x2='168' y1='76' x1='75' gradientUnits='userSpaceOnUse' id='b'%3E%3Cstop id='stop9' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop11' stop-color='%23b3b3b3' offset='0.09' /%3E%3Cstop id='stop13' stop-color='%23c9c9c9' offset='0.18' /%3E%3Cstop id='stop15' stop-color='%23dbdbdb' offset='0.31' /%3E%3Cstop id='stop17' stop-color='%23e8e8e8' offset='0.44' /%3E%3Cstop id='stop19' stop-color='%23f2f2f2' offset='0.59' /%3E%3Cstop id='stop21' stop-color='%23fafafa' offset='0.75' /%3E%3Cstop id='stop23' stop-color='%23FFFFFF' offset='1' /%3E%3C/linearGradient%3E%3Cfilter height='200%25' width='200%25' y='0' x='0' id='c'%3E%3CfeGaussianBlur id='feGaussianBlur26' stdDeviation='12' in='SourceGraphic' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon id='polygon31' points='0 174 0 0 174 0' fill='url(%23a)' /%3E%3Cpath id='path33' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z' filter='url(%23c)' fill-opacity='.5' fill='%23000' /%3E%3Cpath id='path35' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z' fill='url(%23b)' /%3E%3C/svg%3E%0A&quot;);” >

</section>

【讨论】：

谢谢您，先生，我没有想到“使用”

【解决方案2】：

通过以下方式实现这一目标的一种方法：-

body {
  background: #f06d06;
  padding: 20px;
}

section {
  background: white;
  width: 40%;
  padding: 20px;
  position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/c/cc/NATO_Map_Symbol_-_Friendly_Unit_-_Solid.svg) bottom center;
  background-size: 100% 100%;
}

<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>

【讨论】：