使用SVG作为背景图像 [英] Using SVG as background image

问题描述

我似乎无法让这个工作按照需要。我的页面根据加载的内容更改高度，如果需要滚动，svg似乎没有伸展...

I can't seem to get this to work as desired. My page changes height based on what content is loaded and if it requires a scroll, the svg doesn't seem to be stretching...

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？我想不需要加载ANOTHER JS库或调用...任何想法？谢谢！

Is it possible to do this with just CSS3? I'd like to not have to load ANOTHER JS library or call...Any ideas? Thanks!

推荐答案

您可以尝试删除 width 和高度属性，添加 preserveAspectRatio =noneviewBox =0 0 1024 800。至少在Opera上有所不同，假设你想要svg伸展以填充由CSS样式定义的整个区域。

You can try removing the width and height attributes on the svg root element, adding preserveAspectRatio="none" viewBox="0 0 1024 800" instead. It makes a difference in Opera at least, assuming you wanted the svg to stretch to fill the entire region defined by the CSS styles.

这篇关于使用SVG作为背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！