我有一个SVG背景,我需要它是整页,好像它有background-size: cover
。它必须是内联SVG,因为我将为其中的各个形状设置动画。
问题在于,我可以将其设为全高,不跨越屏幕宽度,反之亦然。
感谢您的帮助!
body {
background-color: #333333;
}
.bg__poly-0{fill:#3b3b3b; transform-origin: center center; animation-delay: 0s;}
.bg__poly-1{fill:#383838; transform-origin: center center; animation-delay: 0.3s;}

<svg class="home__bg" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 1280 800" preserveAspectRatio="none">
<polygon class="bg__poly-0" points="160.8,80 92,66 80.8,0 160.8,0 "/>
<polygon class="bg__poly-1" points="209,113 160.8,80 160.8,0 240.8,0 "/>
<polygon class="bg__poly-1" points="356,103 320.8,80 320.8,0 400.8,0 "/>
<polygon class="bg__poly-0" points="480.8,80 356,103 400.8,0 480.8,0 "/>
<polygon class="bg__poly-1" points="588,100 480.8,80 480.8,0 560.8,0 "/>
<polygon class="bg__poly-0" points="800.8,80 672,40 720.8,0 800.8,0 "/>
<polygon class="bg__poly-1" points="960.8,80 849,108 880.8,0 960.8,0 "/>
<polygon class="bg__poly-0" points="1120.8,80 1062,103 1040.8,0 1120.8,0 "/>
<polygon class="bg__poly-1" points="1170,50 1120.8,80 1120.8,0 1200.8,0 "/>
<polygon class="bg__poly-0" points="80.8,160 0.8,160 0.8,80 92,66 "/>
<polygon class="bg__poly-0" points="200.8,190.3 139,140.5 160.8,80 209,113 "/>
<polygon class="bg__poly-0" points="400.8,160 280.8,124 320.8,80 356,103 "/>
<polygon class="bg__poly-1" points="514,182 400.8,160 356,103 480.8,80 "/>
<polygon class="bg__poly-0" points="560.8,160 514,182 480.8,80 588,100 "/>
<polygon class="bg__poly-1" points="720.8,160 609,129.5 640.8,80 672,40 "/>
<polygon class="bg__poly-0" points="1000.8,144 880.8,160 849,108 960.8,80 "/>
<polygon class="bg__poly-1" points="1120.8,160 1040.8,160 1062,103 1120.8,80 "/>
<polygon class="bg__poly-1" points="1280.8,160 1234,129.5 1170,50 1280.8,80 "/>
<polygon class="bg__poly-1" points="68.5,264 0.8,240 0.8,160 80.8,160 "/>
<polygon class="bg__poly-1" points="288.5,200 120.8,232.5 139,140.5 200.8,190.3 "/>
<polygon class="bg__poly-1" points="368,280 320.8,240 280.8,124 400.8,160 "/>
<polygon class="bg__poly-1" points="560.8,240 480.8,240 514,182 560.8,160 "/>
<polygon class="bg__poly-0" points="866,285 680.8,280 720.8,160 800.8,160 "/>
<polygon class="bg__poly-1" points="960.8,240 880.8,240 880.8,160 1000.8,144 "/>
<polygon class="bg__poly-0" points="1062,276.3 960.8,240 1000.8,144 1040.8,160 "/>
<polygon class="bg__poly-0" points="1200.8,240 1090.4,204.8 1120.8,160 1234,129.5 "/>
<polygon class="bg__poly-0" points="160.8,320 103.8,280 68.5,264 120.8,232.5 "/>
<polygon class="bg__poly-0" points="299,345 235,299 288.5,200 320.8,240 "/>
<polygon class="bg__poly-0" points="514,292.5 400.8,320 368,280 480.8,240 "/>
<polygon class="bg__poly-0" points="609,360 560.8,320 560.8,240 640.8,240 "/>
<polygon class="bg__poly-1" points="720.8,320 609,360 640.8,240 680.8,280 "/>
<polygon class="bg__poly-0" points="916,330 880.8,320 880.8,240 960.8,240 "/>
<polygon class="bg__poly-1" points="1229.3,299 1094,361.9 1090.4,204.8 1200.8,240 "/>
<polygon class="bg__poly-1" points="114.6,355 61.5,369.5 103.8,280 160.8,320 "/>
<polygon class="bg__poly-1" points="400.8,400 299,424.8 299,345 400.8,320 "/>
<polygon class="bg__poly-1" points="640.8,400 480.8,400 560.8,320 609,360 "/>
<polygon class="bg__poly-0" points="840.8,454.5 720.8,400 720.8,320 800.8,320 "/>
<polygon class="bg__poly-1" points="849,369.5 840.8,454.5 800.8,320 880.8,320 "/>
<polygon class="bg__poly-0" points="1140,424.8 1040.8,480 1040.8,320 1094,361.9 "/>
<polygon class="bg__poly-0" points="1280.8,400 1200.8,400 1229.3,299 1280.8,320 "/>
<polygon class="bg__poly-0" points="142,453 103.8,470 61.5,369.5 114.6,355 "/>
<polygon class="bg__poly-1" points="264.9,458 142,453 114.7,355 240.8,400 "/>
<polygon class="bg__poly-0" points="400.8,480 344.7,509 299,424.8 400.8,400 "/>
<polygon class="bg__poly-1" points="499.8,504.8 400.8,480 400.8,400 480.8,400 "/>
<polygon class="bg__poly-1" points="800.8,480 689,449.5 720.8,400 840.8,454.5 "/>
<polygon class="bg__poly-1" points="960.8,480 880.8,480 849,369.5 960.8,400 "/>
<polygon class="bg__poly-1" points="1120.8,480 1040.8,480 1040.8,480 1140,424.8 "/>
<polygon class="bg__poly-0" points="80.8,560 0.8,560 0.8,480 103.7,470 "/>
<polygon class="bg__poly-0" points="320.8,560 240.8,560 264.9,458 344.7,509 "/>
<polygon class="bg__poly-0" points="528,589 480.8,560 499.8,504.8 600.8,458 "/>
<polygon class="bg__poly-1" points="720.8,560 640.8,560 640.8,480 689,449.5 "/>
<polygon class="bg__poly-0" points="912,523.5 780.8,581.8 800.8,480 880.8,480 "/>
<polygon class="bg__poly-1" points="1016,523.5 989,596.5 960.8,480 1040.8,480 "/>
<polygon class="bg__poly-1" points="1280.8,560 1200.8,560 1177.8,440 1280.8,480 "/>
<polygon class="bg__poly-0" points="160.8,640 68.5,596.5 80.8,560 142,453 "/>
<polygon class="bg__poly-1" points="188.5,583 160.8,640 142,453 240.8,560 "/>
<polygon class="bg__poly-0" points="400.8,640 330,645 320.8,560 368,546.5 "/>
<polygon class="bg__poly-1" points="560.8,640 480.8,640 480.8,560 528,589 "/>
<polygon class="bg__poly-1" points="800.8,640 720.8,640 720.8,560 780.8,581.8 "/>
<polygon class="bg__poly-1" points="960.8,640 849,609.5 912,523.5 989,596.5 "/>
<polygon class="bg__poly-0" points="1099,680 1021,658.3 1016,523.5 1089,529.5 "/>
<polygon class="bg__poly-1" points="55.5,692.8 0.8,720 0.8,640 68.5,596.5 "/>
<polygon class="bg__poly-0" points="288.5,669.5 160.8,720 160.8,640 188.5,583 "/>
<polygon class="bg__poly-1" points="382,703 288.5,745.5 330,645 400.8,640 "/>
<polygon class="bg__poly-0" points="560.8,720 450.3,745.5 480.8,640 560.8,640 "/>
<polygon class="bg__poly-1" points="588,680 560.8,720 560.8,640 609,609.5 "/>
<polygon class="bg__poly-0" points="720.8,720 588,680 609,609.5 720.8,640 "/>
<polygon class="bg__poly-1" points="912,680 769,680 800.8,640 849,609.5 "/>
<polygon class="bg__poly-1" points="1025,740 960.8,720 960.8,640 1021,658.3 "/>
<polygon class="bg__poly-0" points="1229.3,746.4 1160.8,760 1099,680 1227,616 "/>
<polygon class="bg__poly-0" points="160.8,800 80.8,800 55.5,692.8 160.8,720 "/>
<polygon class="bg__poly-1" points="560.8,800 480.8,800 450.3,745.5 560.8,720 "/>
<polygon class="bg__poly-1" points="800.8,800 720.8,800 720.8,720 769,680 "/>
<polygon class="bg__poly-0" points="960.8,800 880.8,800 912,680 960.8,720 "/>
<polygon class="bg__poly-1" points="1120.8,800 1040.8,800 1025,740 1160.8,760 "/>
<polygon class="bg__poly-1" points="1280.8,800 1200.8,800 1229.3,746.4 1280.8,720 "/>
</svg>
&#13;