html - 如何在 css 中制作矢量背景图像而不是使用 jpg 或 png

Question

我已经看到并尝试采用使用 css 而不是 jpeg 或 png 图像的背景。看起来像这样:

它是用 css 设计的，但我不知道如何设计。我认为这是一个SVG。任何人都可以帮助...

Answer 1

如果你想把它嵌入到你的代码中，

如下所示创建svg文件并将其命名为test.svg。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="126.000000pt" viewBox="0 0 200.000000 126.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,63.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path id="path" d="M340 605 c-71 -16 -175 -20 -242 -10 -30 4 -49 2 -63 -9 -19 -14 -20
-28 -23 -268 -3 -233 -1 -256 15 -276 17 -21 25 -22 173 -21 277 2 409 2 755
2 562 0 597 -1 804 -4 150 -2 203 0 214 10 14 11 16 53 17 281 1 320 11 299
-132 274 -84 -14 -103 -14 -208 0 -272 37 -287 37 -398 16 -86 -17 -113 -18
-176 -9 -60 8 -92 7 -159 -6 -69 -13 -99 -14 -173 -5 -321 40 -332 41 -404 25z"/>
</g>
</svg>

在你的文件中有如下的CSS:

 #orange{
 width:200px;
  height:63px;
  background-color: #FF931E;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
  //fill: #FF931E;
}
#red{
  width:200px;
  height:63px;
  background-color: red;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
}

和主要的html文件如下:

<div id="red">Download Now</div>
<div id="orange">Download Now</div>