Sử dụng SVG làm hình nền

Question

Tôi dường như không thể làm việc này như mong muốn. trang của tôi thay đổi chiều cao dựa trên những gì nội dung được nạp và nếu nó đòi hỏi một cuộn, svg dường như không thể kéo dài ...

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>

Có thể làm được điều này chỉ với CSS3? Tôi muốn không phải tải một thư viện JS nào hoặc gọi ... Bất kỳ ý tưởng nào? Cảm ơn!

Answer 1

Hãy thử đặt nó trên 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; 
} 

Answer 2

Bạn có thể thử gỡ bỏ các width và height thuộc tính trên phần tử gốc svg, bạn thêm preserveAspectRatio="none" viewBox="0 0 1024 800" để thay thế. Nó làm cho một sự khác biệt trong Opera ít nhất, giả sử bạn muốn svg để kéo dài để điền vào toàn bộ khu vực được xác định bởi các phong cách CSS.

Answer 3

Bạn đã đặt chiều rộng cố định và chiều cao trong thẻ svg của mình. Đây có lẽ là gốc rễ của vấn đề của bạn. Hãy thử không loại bỏ chúng và thiết lập chiều rộng và chiều cao (nếu cần) bằng cách sử dụng CSS để thay thế.