2012-06-18 3 views
0

전체 화면으로 확장되는 CSS를 통해 이미지를로드하고 싶습니다. css :IE 8 이하에서 배경 이미지 늘이기

body { 

    background: url(images/reelgoodguide2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    overflow: auto; 
    margin: 0px; 
    padding: 0px; 

} 

Chrome, Firefox 및 IE9에서 완벽하게 작동합니다.

브라우저가 IE8 또는 IE7 인 경우 추가 CSS 파일을 포함하는 조건이 HTML에 있습니다. 이 CSS에는 다음이 포함

body{ 

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')"; 
} 

하지만 그 대신 alphaimageloader의

전체 화면으로 이미지를 스트레칭, 이미지 중심의 남아를하고 크기를 조정하지 않습니다.

참고 : 개발자 도구를 열면 CSS 파일이 있음을 알 수 있습니다. 필터 속성을 비활성화하면 아무 일도 일어나지 않습니다. 임이 틀리면 어떤 조언을할까요?

미리 감사드립니다.

답변

5

괜찮 ... 만지는 지독한 비트 후에이 난 냈 무엇인가

첫째
  화상에 필터 경로는 HTML 문서가 아닌 CSS 파일에 상대적이다. 둘째 좌절

:
  나는이 html 대신 body에 필터를 적용하여 작업을 얻었다.

나는 IE의 해결 방법 html에 적용되지 않았 음을 읽을 수는 있지만 (나는 이미지 경로 문제를 정리 한 후) 제가 주목하는 것은이 있었다고했다 신장 된 배경이 이미지를하지만 다른 모든 뒤에 했다 있었다.

+0

오 마이 갓! 나는 이것을 읽을 때까지 모든 것을 시도해 보았습니다. 나는 당신에게 하나의 의향이 있습니다. – Brent

0

저는 CSS만으로는 불가능하다고 생각합니다. supersized를 검색하십시오. JavaScript 라이브러리를 찾을 수 있습니다.

다운로드 backgroundsize.min.htc 및 프로젝트 안에 넣어 : IE8 배경 문제를 해결하기

+0

아니요, 가능합니다. 위의 수정을 참조하십시오. 그래서 나는 아직 그것을 받아들이지 않을 것이다. – Dave

0

하나 개 더 유용한 답변입니다.

이제 단순히 CSS에서 다음 줄을 추가

.class_name{ 
    //your other properties 
    background-size: cover; 
    -ms-behavior: url(backgroundsize.min.htc); 
} 

참고 : 프로젝트 설정에 따라 url를 사용합니다.

이 간단한 솔루션을 즐기십시오. :)