使用SVG作为背景图片

我似乎无法得到这个按需工作。我的页面高度改变基于加载哪些内容，如果它需要一个滚动中，SVG似乎并没有被拉伸......使用SVG作为背景图片

html { 
 
    height: 100%; 
 
    background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg); 
 
    background-size: 100% 100%; 
 
    -o-background-size: 100% 100%; 
 
    -webkit-background-size: 100% 100%; 
 
    background-size: cover; 
 
}

<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>

是否有可能只做到这一点CSS3？我想不必加载另一个JS库或调用...任何想法？谢谢！

来源

2012-02-07 Dirty Bird Design

尝试把它放在你的body

body { 
    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; 
}

来源

2012-02-08 04:36:54 Duopixel

nope一些真正的奇怪行为我也有html {height：100％} – 2012-02-08 04:44:16

它在svg中指定的800px高度达到后继续重复。我试图让svg的高度和宽度都达到100％，这让情况变得更糟。 – 2012-02-08 04:49:23

你确定它重复吗？你有一个背景颜色从底部窥视的矩形。 – Duopixel 2012-02-08 05:13:31

你可以尝试SVG根元素中取出width和height属性，添加preserveAspectRatio="none" viewBox="0 0 1024 800"代替。至少在Opera中有所不同，假设您希望svg伸展以填充由CSS样式定义的整个区域。

来源

2012-02-08 12:21:19

这对我来说是个诡计 – Octopus 2013-06-27 03:09:18

你已经在你的svg标签中设置了一个固定的宽度和高度。这可能是你的问题的根源。尝试不去除这些，并使用CSS设置宽度和高度（如果需要）。

来源

2015-01-23 05:29:08

使用SVG作为背景图片

回答

相关问题