[css] IE에서 배경 크기 작업을하려면 어떻게해야합니까?

Program / 글쓴이

background-sizeIE에서 CSS 스타일을 작동 시키는 알려진 방법이 있습니까?

답변

조금 늦었지만 이것도 유용 할 수 있습니다. 적용 할 수있는 IE 5.5+ 용 IE 필터가 있습니다.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

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

그러나 이렇게하면 할당 된 영역에 맞게 전체 이미지 크기가 조정되므로 스프라이트를 사용하는 경우 문제가 발생할 수 있습니다.

사양 : AlphaImageLoader 필터 @microsoft

답변

내가 만든 jquery.backgroundSize.js을 “커버”를위한 대체 IE8으로 사용할 수있는 1.5K JQuery와 플러그인이 값을 “포함”. 데모를 살펴보십시오 .

답변

이 게시물 덕분에 크로스 브라우저 행복을위한 전체 CSS는 다음과 같습니다.

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

이 코드에서 작업 한 지 너무 오래되었지만 브라우저 호환성을 높이고 싶습니다. 브라우저 호환성을 높이기 위해 CSS에 추가했습니다.

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

답변

나중에도 유용 할 수 있습니다. background-size : cover의 polyfill으로 사용할 수있는 jQuery-backstretch-plugin이 있습니다. jQuery로 css-background-url 속성을 가져 와서 jQuery-backstretch 플러그인에 공급하는 것이 가능하고 상당히 간단해야합니다. modernizr을 사용하여 백그라운드 크기 지원을 테스트하고이 플러그인을 폴백으로 사용하는 것이 좋습니다.

backstretch – 플러그인은 SO에 언급되었다 여기 국지적 인 jQuery를-backstretch – 플러그인 – 사이트입니다 여기 .

비슷한 방식으로 상황에 따라 배경 크기를 작동시키는 jQuery 플러그인 또는 스크립트를 만들 수 있습니다 (배경 크기 : 100 %) 및 IE8-. 따라서 귀하의 질문에 대답하십시오 : 예 방법이 있지만 atm은 플러그 앤 플레이 솔루션이 없습니다 (즉, 직접 코딩해야합니다).

(면책 조항 : backstretch-plugin을 철저히 조사하지는 않았지만 background-size와 같은 것으로 보입니다 : cover)

답변

: 그에게 좋은의 polyfill 있습니다 louisremi / 배경-크기 polyfill은

설명서를 인용하려면 :

IE에 필요한 MIME 유형을 전송하는 .htaccess와 함께 backgroundsize.min.htc를 웹 사이트에 업로드하십시오 (아파치 만 해당 – nginx, 노드 및 IIS에 내장되어 있음).

CSS에서 background-size를 사용하는 모든 곳에서이 파일에 대한 참조를 추가하십시오.

.selector {
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

답변

IE11 Windows 7에서는 이것이 효과적이었습니다.

background-size: 100% 100%;

답변

IE8 에서는이 파일 ( https://github.com/louisremi/background-size-polyfill“background-size polyfill”)을 사용하기 정말 간단합니다.

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}