在CSS中用作背景img的SVG文件



我想使用一个figma自制的SVG,我把它保存在笔记本电脑上,作为VisaCard.SVG,我可以在编辑器中打开它,但它有HTML格式。我的主要目标是使用它作为SVG作为背景,在上面写文本

我在网上查看了如何使用SVG作为背景,但到目前为止,我只找到了使用SVG作为链接的示例,所以我想知道如何使用SVG文件来实现这一点。或者有人能帮助我理解如何将我自己的SVG实现为URL吗?我从https://codepen.io/rmcguinn/pen/JpVwBp,但是SVG的sintax不同。

Example from <https://codepen.io/rmcguinn/pen/JpVwBp>
.Inner-wrap {
background-color: red;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%230d1838' points='1600%2C160 0%2C460 0%2C350 1600%2C50'/%3E%3Cpolygon fill='%230e315d' points='1600%2C260 0%2C560 0%2C450 1600%2C150'/%3E%3Cpolygon fill='%230f4981' points='1600%2C360 0%2C660 0%2C550 1600%2C250'/%3E%3Cpolygon fill='%231062a6' points='1600%2C460 0%2C760 0%2C650 1600%2C350'/%3E%3Cpolygon fill='%23117aca' points='1600%2C800 0%2C800 0%2C750 1600%2C450'/%3E%3C/g%3E%3C/svg%3E");
background-size: auto 147%;
background-position: center;
position: relative;
height: 100%;
width: 100%;
border-radius: 13px;
padding: 20px 40px;
box-sizing: border-box;
color: #fff;
}

矿山SVG

<svg width="240" height="144" viewBox="0 0 240 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_105_102461)">
<rect width="240" height="144" rx="8" fill="url(#paint0_linear_105_102461)"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M-28.6897 92.6764L61.0255 68.6372C69.0915 66.476 73.8782 58.1851 71.717 50.1191L47.6779 -39.596L14.6097 -58.688L-39.5345 35.0924C-41.5395 38.5653 -42.0828 42.6924 -41.045 46.5658L-28.6897 92.6764Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M207.941 180.677L297.656 156.638C305.722 154.477 310.508 146.186 308.347 138.12L284.308 48.405L251.24 29.313L197.096 123.093C195.091 126.566 194.547 130.693 195.585 134.567L207.941 180.677Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_105_102461" x1="0" y1="0" x2="257.595" y2="46.4717" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F3CF0"/>
<stop offset="1" stop-color="#0C31C6"/>
</linearGradient>
<clipPath id="clip0_105_102461">
<rect width="240" height="144" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>

首先,您需要将svg图像转换为css背景。您可以通过访问此工具来完成此操作。有了css背景后,通常可以将其应用于所需的元素。那就行了!

最新更新