Question

我试图让svg background-img覆盖整个元素，无论屏幕大小如何，都没有运气。

我已尝试删除svg的width和height，将background-size设置为封面，并将preserveAspectRatio="none"设置为svg。没有运气。

非常感谢任何帮助。

我的SVG，mountains.svg：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     preserveAspectRatio="none" viewBox="0 0 1024 800" xml:space="preserve">
<g>
    <polygon fill="#3C5E7E" points="661.914,566.889 700.57,529.312 721.889,593.389  "/>
    <polygon fill="#2E4560" points="835.405,373.64 892.21,414.48 972.249,536.266 910.915,690.195 828.119,690.195 815.137,580.579    
        "/>
    <polygon opacity="0.1" fill="#2E4560" enable-background="new    " points="1278.392,222.524 1223.854,99.999 1070.468,430.561 
        1000.496,399.506 1000.496,399.506 991.525,424.285 982.885,404.468 955.668,456.688 887.434,290.596 856.723,388.965 
        706.694,132.673 439.204,690.195 669.622,690.195 730.842,563.832 822.991,373.64 826.372,366.664 892.21,414.48 955.668,523.375 
        994.012,424.918 999.104,403.352 1070.468,430.561 1171.972,475.949 1278.392,523.395  "/>
    <polyline fill="#335573" points="213.419,331.142 259.255,614.528 207,580.677 190.316,614.937 161.348,610.442 140.994,690.195 
        0,690.195 0,656.528 112.209,548.057 213.419,331.142     "/>
    <polygon fill="#324668" points="55.004,480.378 41.254,580.268 30.621,570.892 0,656.528 90.705,571.131   "/>
    <polygon fill="#335573" points="1000.496,399.506 1083.912,688.581 1013.475,674.514 997.251,690.195 895.303,690.195  "/>
    <polygon fill="#335573" points="55.004,480.378 41.804,592.918 30.803,575.793 0,656.528 0,614.521    "/>
    <polygon fill="#324668" points="1000.496,399.506 1070.468,684.719 1011.152,650.684 997.251,690.195 1278.392,690.195 
        1278.392,523.395    "/>
    <polygon fill="#2E4560" points="700.57,529.312 706.951,594.512 750.563,584.407 763.324,554.088  "/>
    <polygon fill="#98D0D1" points="998.646,395.097 1021.582,503.337 1025.98,483.232 1076.028,538.369 1056.565,458.727 
        1127.466,484.594 1084.834,447.836 1109.393,447.836  "/>
    <polygon fill="#F7F9F9" points="1023.665,492.082 1010.689,562.193 986.592,517.949 932.755,586.699 998.646,395.097   "/>
    <polyline fill="#3C5F82" points="392.734,690.195 640.941,572.302 520.041,444.547 418.755,561.525 302.658,595.459 
        392.734,690.195     "/>
    <polyline fill="#2E4560" points="379.119,690.195 463.992,573.102 497.621,586.699 511.231,555.537 556.07,577.894 
        520.041,444.547 803.481,649.757 841.11,690.195 379.119,690.195  "/>
    <polygon fill="#335573" points="895.303,690.195 858.799,528.432 817.91,574.679 840.958,377.63 826.372,366.664 669.622,690.195   
        "/>
    <polygon fill="#81C6CC" points="520.041,444.547 527.849,484.919 539.358,496.05 542.662,483.874 550.167,489.264 547.365,479.881 
        554.47,481.678 551.269,476.188 564.729,476.633  "/>
    <polygon fill="#F7F9F9" points="520.041,444.402 531.953,488.165 531.953,493.154 521.143,483.573 525.996,505.131 
        509.533,486.866 511.035,495.152 504.029,488.363 500.225,498.045 497.423,484.971 480.309,489.462     "/>
    <polygon fill="#F7F9F9" points="702.716,551.262 699.973,541.027 689.386,554.238 694.014,543.78 689.085,544.85 691.768,541.027 
        686.234,542.859 700.57,529.312  "/>
    <polygon fill="#81C6CC" points="700.187,529.012 702.716,551.262 703.306,536.609 711.89,552.741 709.503,541.027 718.81,544.85 
        714.606,538.294 723.615,537.995     "/>
    <g id="Layer_3">
        <polygon fill="#324668" points="213.419,331.142 246.421,595.367 205.718,548.881 190.316,614.937 159.513,590.472 
            133.111,690.195 392.734,690.195         "/>
        <polygon fill="#98D0D1" points="213.419,329.92 228.423,451.268 228.423,394.852 239.821,419.217 236.52,387.979 255.651,415.708 
                    "/>
        <polyline fill="#FFFFFF" points="213.419,329.92 172.615,418.593 199.118,391.205 189.216,451.268 213.419,402.091 
            228.423,451.268         "/>
    </g>
</g>
</svg>

我的HTML：

<style>
#header {
    margin:0 0 0 0;
    height: 110%;
    background-image: url(mountains.svg);
    background-size:cover;
    background-position: 0 -50px;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
}
</style>
<body>
<div id="header">

</div>
</body>

Answer 1

以下是我的测试;问题可能在你的样式表代码中。

#header {
    margin: 0 0 0 0;
    display: block;
    height: 100vh;
    background-image: url("mountains.svg");
    background-position: 0 -50px;
}

如果您在标题父级中设置属性height，则可以对此属性使用值inherit。

SVG背景的宽度/高度未调整为容器

1 个答案: