SVG'yi arka plan resmi olarak kullanma

İstenildiği gibi çalışmasını sağlayamıyorum. Sadece ile bunu yapmak mümkün mü Benim sayfa yüklendiğinde içeriği temel yüksekliğini değiştirir ve bir kaydırma gerektiriyorsa, svg germe olmak görünmüyor ...SVG'yi arka plan resmi olarak kullanma

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? Bir JS kütüphanesi yüklemek veya aramak zorunda kalmak istemiyorum ... Herhangi bir fikir? Teşekkürler!

kaynak

2012-02-07 Dirty Bird Design

senin 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; 
}

kaynak

2012-02-08 04:36:54 Duopixel

Bazı gerçek garip davranışlar yok Ayrıca html var {yükseklik:% 100} –

svg belirtilen 800px yükseklik ulaşıldıktan sonra yinelenen tutar. Yüksekliğini ve genişliğini svg% 100'de yapmaya çalıştım, bu sadece daha da kötüleştirdi. –

Tekrarlandığından emin misin? Alttan gelen arka plan rengiyle bir rekt var. – Duopixel

Sen svg kök elemana width ve height özelliklerini kaldırmayı deneyebilirsiniz yerine preserveAspectRatio="none" viewBox="0 0 1024 800" ekleyerek üzerine yerleştirmeyi deneyin. En azından, svg'nin CSS stilleri tarafından tanımlanan tüm bölgeyi dolduracağını düşündüğünüz varsayılarak, Opera'da bir fark yaratır.

kaynak

2012-02-08 12:21:19

Bu benim için hile nedir – Octopus

svg etiketinize sabit genişlik ve yükseklik ayarladınız. Bu muhtemelen senin sorununun köküdür. Bunları kaldırmaya çalışmayın ve bunun yerine CSS'yi kullanarak genişlik ve yüksekliği (gerekirse) ayarlayın.

kaynak

2015-01-23 05:29:08

SVG'yi arka plan resmi olarak kullanma

cevap

İlgili konular