programing

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

batch 2023. 9. 8. 21:18
반응형

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

CSS 스타일을 만들 수 있는 알려진 방법이 있습니까?background-sizeIE에서 일합니까?

조금 늦었지만, 이것 또한 유용할 수 있습니다.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: "cover" 및 "contain" 값에 대한 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>

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

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

나중에라도, 하지만 이것도 유용할 수 있습니다.배경 사이즈의 폴리필로 사용할 수 있는 jQuery-back stretch-plugin이 있습니다: cover.jQuery로 css-background-url 속성을 잡고 jQuery-backstretch 플러그인에 공급하는 것이 가능해야 한다고 생각합니다.좋은 방법은 modernizr로 백그라운드 사이즈 지원을 테스트하고 이 플러그인을 폴백으로 사용하는 것입니다.

여기 SO에 백스트레치 플러그인이 언급되었습니다.jQuery-backstretch-plugin 사이트가 여기에 있습니다.

비슷한 방식으로 jQuery-plugin 또는 스크립트를 만들 수 있습니다. 배경 크기: 100%) 및 IE8-에서 배경 크기를 사용할 수 있습니다.질문에 대답해 드리겠습니다.네, 방법이 있지만 자동으로 플러그 앤 플레이 솔루션이 없습니다(즉, 직접 코딩을 해야 합니다).

(설명자:백스트레치플러그를 꼼꼼히 검사하지는 않았지만 백사이즈와 동일하게 적용되는것 같습니다 : cover)

좋은 폴리필이 있습니다: 루이레미/배경-사이즈-폴리필

설명서 인용하기

backgroundsize.min.htc를 IE에서 필요로 하는 mime-type을 전송하는 .htaccess와 함께 웹 사이트에 업로드합니다(Apache only - nginx, node 및 IIS에 내장됨).

CSS에서 배경 크기를 사용하는 모든 곳에서 이 파일에 대한 참조를 추가합니다.

.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 윈도우 7에서는 이것이 나에게 효과가 있었습니다.

background-size: 100% 100%;

이 파일(https://github.com/louisremi/background-size-polyfill "background-size polyfill")을 IE8에 사용할 수 있습니다.

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

나는 다음과 같은 대본으로 시도했습니다.

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

저한테는 통했어요!

언급URL : https://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie

반응형