如何将svg浮动到background-size：contains的背景图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将svg浮动到background-size：contains的背景图像相关的知识，希望对你有一定的参考价值。
我试图实现一个svg浮动图像底部的背景图像。 background-image有css规则：background-size：cover
代码：
<div class="pre-header2">
<div class="pre-header-logo">
<img src="img/logo.png" />
</div>
<svg viewBox="0 0 1439 150" preserveAspectRatio="none" style="top: 150px">
----pathes here---
</svg>
</div>
这个svg（蓝色波浪）位于一个名为pre-header2的div中
CSS：
.pre-header2 {
width: 100%;
height: 400px;
background-image: url("../img/redimage.jpg");
background-repeat: no-repeat;
background-size: contain;
opacity: 0.8;
}
在宽度上减少浏览器窗口时，会发生以下情况：
这就是应该如何，在屏幕的每个宽度上（底部波浪总是与底部背景图像相同的位置）：
我怎样才能正常工作？
答案
你必须在这里平衡许多属性：
- 背景图像和SVG需要具有相同的比例，i。即图像1920px * 400px表示
viewBox="0 -150 1439 300"（因此viewBox底部对应于grafics底部） - 两者都必须显示在相同的位置，这意味着需要使用
position: absolute;将SVG定位在徽标图像的顶部 - 背景图像的
background-position: top;background-size: contain;对应于SVG的width="100%" height="100%" preserveAspectRatio="xMidYMin meet"
.pre-header2 {
width: 100%;
height: 400px;
background-image: url("http://develop.webprofis.nl/wisselslag/img/redimage.jpg");
background-repeat: no-repeat;
background-size: contain;
opacity: 0.8;
position: relative;
}
.pre-header2 svg, .pre-header2 img {
position: absolute;
}<div class="pre-header2">
<div class="pre-header-logo">
<img src="img/logo.png" />
</div>
<svg width="100%" height="100%" viewBox="0 -150 1439 300" preserveAspectRatio="xMidYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sell-on-FG-Flow" transform="translate(-1.000000, -2412.000000)" fill="#102b72">
<g id="Customer-Section" transform="translate(1.000000, 1026.000000)">
<g id="loading" transform="translate(0.000000, 1386.807849)">
<path d="M0,0.44962518 C0,0.44962518 69.8688,45.2313724 177.33888,44.2226067 C248.95104,43.552353 314.385739,-5.15951798 409.840459,0.449625191 C474.298699,4.23757402 545.16096,57.4956607 617.14176,56.7306236 C690.65856,55.948661 767.653125,2.5348588 879.60576,0.44962518 C991.558395,-1.63560844 1088.03328,67.5731617 1177.536,69.2352554 C1331.30112,72.0922964 1437.45408,13.0354998 1440,19.209958 L1440,149.188395 L0,149.188395 L0,0.44962518 Z" id="Fill-1" style="mix-blend-mode: normal;" opacity="0.200000003"></path>
<path d="M0,111.035854 C0,111.035854 51.0254437,35.5890899 232.119844,37.9418553 C376.354084,39.8167628 405.5616,88.4395664 489.45792,88.5460952 C558.55872,88.6313183 637.41312,35.8660647 709.35936,37.9418551 C780.64512,39.9993835 845.2608,93.7538334 915.072,94.167774 C983.08224,94.5695399 1040.41617,34.2468265 1149.16224,32.3201764 C1257.90831,30.3935263 1290.01761,73.0233211 1337.42625,88.5460941 C1411.15809,112.682484 1440,116.657533 1440,116.657533 L1440,149.188395 L0,149.188395 L0,111.035854 Z" id="Fill-3" style="mix-blend-mode: normal;" opacity="0.400000006"></path>
<path d="M1440,71.0100953 C1369.06368,71.0100953 1358.59968,120.386809 1134.97344,117.442375 C1074.32448,116.645224 945.9264,46.7508359 879.60576,44.4778769 C803.03232,41.8494314 723.87456,97.8439386 645.51552,97.5423137 C565.45536,97.2335072 496.00693,34.2453323 421.20757,31.0998155 C339.18517,27.6490831 251.70048,110.465504 184.4352,104.174471 C42.56256,90.9101568 0,51.1100338 0,51.1100338 L0,149.188395 L1440,149.188395 L1440,71.0100953 Z" id="Fill-5" style="mix-blend-mode: normal;" opacity="0.600000024"></path>
<path d="M1440,117.22338 C1431.25632,122.430256 1372.46208,129.835325 1255.5648,111.699485 C1200.95232,103.223732 1152.49152,62.8816573 1085.3184,61.9754635 C1018.42944,61.0722604 932.30592,107.455627 858.32448,106.1726 C751.92192,104.333296 711.5136,62.187806 638.42304,61.9754635 C568.03584,61.7691025 512.85504,93.0851276 446.89536,95.1248115 C348.23808,98.1753649 262.3296,56.6728838 184.4352,56.4515691 C52.96896,56.074736 0,111.699485 0,111.699485 L0,149.188395 L1440,149.188395 L1440,117.22338 Z" id="Fill-7"></path>
</g>
</g>
</g>
</g>
</svg>
</div>以上是关于如何将svg浮动到background-size：contains的背景图像的主要内容，如果未能解决你的问题，请参考以下文章
为啥 background-size:100% 100%;不适用于此 SVG？