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

일부 실제 이상한 동작도 없습니다. html {height : 100 %} –

svg에 지정된 800px 높이에 도달하면 반복됩니다. Ive는 SVG 100 %에서 높이와 너비를 만들려고했는데, 그만큼 악화되었습니다. –

반복 하시겠습니까? 당신은 하단에서 엿볼 수있는 배경 색상의 rect가 있습니다. – Duopixel

당신은 SVG 루트 요소에 width 및 height 속성을 제거 시도 할 수 있습니다, 대신 preserveAspectRatio="none" viewBox="0 0 1024 800" 추가에 배치하십시오. CSS 스타일로 정의 된 전체 영역을 채우기 위해 svg를 늘리고 싶다고 가정 할 때 Opera는 최소한 차이가 있습니다.

출처

2012-02-08 12:21:19

이것은 나를 위해 트릭을 한 것입니다. – Octopus

svg 태그에서 고정 너비와 높이를 설정했습니다. 이것은 아마도 문제의 근원입니다. 그것들을 제거하지 말고 CSS를 사용하여 너비와 높이를 설정하십시오 (필요한 경우).

출처

2015-01-23 05:29:08

SVG를 배경 이미지로 사용

답변

관련 문제