css – 使用SVG作为背景图像

我似乎无法让它按需要工作.我的页面根据加载的内容更改高度,如果需要滚动,则svg似乎不会伸展…

SVG

<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">
            <stop stop-color="#ffffff" offset="0"/>
            <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
        </radialGradient>
        <radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">
            <stop stop-color="#ffffff" offset="0"/>
            <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
        </radialGradient>
     </defs>
     <g display="inline">
        <title>Layer 1</title>
        <rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>
    </g>
     <g>
          <title>Layer 2</title>
          <rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>
          <rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>
     </g>
</svg>

和CSS

html{
    height: 100%;
    background-image: url(../img/bg.svg);
    background-size:100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size:cover;
}

可以用CSS3做这个吗？我想不必加载其他的JS库或调用…任何想法？谢谢！

解决方法

您可以尝试删除svg根元素上的width和height属性,而不是添加preserveAspectRatio =“none”viewBox =“0 0 1024 800”.至少在Opera中有所不同,假设您想要使svg扩展以填充由CSS样式定义的整个区域.

原文地址：https://www.jb51.cc/css/217058.html