如何将svg浮动到background-size：contains的背景图像

时间：2017-12-27 10:33:57

标签： html svg

我试图实现一个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;
}

当宽度减少浏览器窗口时，会发生以下情况：

enter image description here

它应该如何，在屏幕的每个宽度上（底部波浪总是与底部背景图像相同的位置）： enter image description here

如何使其正常工作？

小提琴：https://jsfiddle.net/9zug2wzk/

1 个答案:

答案 0 :(得分：2)

你必须在这里平衡许多属性：

  • 背景图片和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>

相关问题
最新问题