CSS 배경 확장 및 확장

컨테이너를 채우기 위해 확장하거나 확장하기 위해 CSS에서 배경을 얻는 방법이 있습니까?

최신 브라우저의 경우 다음을 사용하여이를 수행 할 수 있습니다 background-size.

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover 이미지를 세로 또는 가로로 늘려 타일링 / 반복하지 않도록합니다.

Safari 3 이상, Chrome, Opera에서 작동합니다. 이상, 10 이상, Firefox 3.6 이상 및 Internet Explorer 9 이상에서 작동합니다.

더 낮은 버전의 Internet Explorer에서 작동하려면 다음 CSS를 시도하십시오.

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

CSS 3 속성을 사용하십시오 background-size.

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

2012 년부터 최신 브라우저에서 사용할 수 있습니다.

CSS로 이미지를 스케일링하는 것은 가능하지 않지만 다음과 같은 방식으로 비슷한 효과를 얻을 수 있습니다.

이 마크 업을 사용하십시오.

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

다음 CSS로 :

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

그리고 당신은해야합니다!

이미지를 "풀 블리드"로 조정하고 종횡비를 유지하려면 다음과 같이하십시오.

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

꽤 잘 작동합니다! 그러나 한 치수가 잘 리면 양쪽에 고르게 잘리지 않고 이미지의 한쪽에만 잘립니다. Firefox, Webkit 및 Internet Explorer 8 에서 테스트했습니다 .

CSS3에서 background-size 속성 을 사용하십시오 :

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

편집 : Modernizr 은 배경 크기 지원 감지를 지원 합니다. 작동하도록 작성된 JavaScript 해결 방법을 사용할 수 있지만 필요한 경우 지원하지 않으면 동적으로로드 할 수 있습니다. 이렇게하면 특정 브라우저의 침입 CSS 해킹에 의존하지 않고 코드를 유지 관리 할 수 ​​있습니다.

개인적으로 스크립트를 사용하여 imgsizer 의 적응 인 jQuery를 사용하여 처리합니다 . 대부분의 디자인에서 장치 전체의 유체 레이아웃에 너비 %를 사용함에 따라 루프 중 하나에 약간의 적응이 있습니다 (항상 100 %가 아닌 크기를 고려함).

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

편집 : 당신은 또한 jQuery CSS3 Finaliz [s] e에 관심이있을 수 있습니다 .

background-size 기사를 사용해보십시오 . 다음을 모두 사용하면 Internet Explorer를 제외한 대부분의 브라우저에서 작동합니다.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

현재는 아닙니다. CSS 3 에서 사용할 수 있지만 대부분의 브라우저에서 구현 될 때까지 시간이 걸립니다.

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

다음에서 작동합니다.

• 사파리 3+
• Chrome Whatever +
• IE 9 이상
• Opera 10+ (Opera 9.5는 배경 크기는 지원하지만 키워드는 지원하지 않음)
• Firefox 3.6 이상 (Firefox 4는 비 공급 업체 접두사 버전을 지원합니다)

또한 당신은 즉 솔루션을 시도 할 수 있습니다

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Chris Coyier http://css-tricks.com/perfect-full-page-background-image/ 의이 기사에 대한 크레딧

한마디로 : 아니오. 이미지를 늘리는 유일한 방법은 <img>태그를 사용하는 것입니다. 창의력을 발휘해야합니다.

이것은 답변이 작성된 2008 년에 사실이었습니다. 오늘날 background-size이 문제를 해결하는 최신 브라우저가 지원 됩니다. IE8은이를 지원하지 않습니다.

"스트레치 및 스케일"정의 ...

비트 맵 형식이있는 경우 일반적으로 비트 맵 형식을 늘리고 끌어내는 것이 좋지 않습니다 (그래픽으로 말하면). 반복 가능한 패턴을 사용하여 동일한 효과의 느낌을 줄 수 있습니다. 예를 들어 페이지 하단으로 갈수록 그라디언트가있는 경우 너비가 단일 픽셀이고 컨테이너와 높이가 같은 그래픽 (또는 스케일링을 고려하여 더 큰 그래픽)을 사용한 다음 페이지. 마찬가지로 그라디언트가 페이지에서 실행되면 컨테이너보다 1 픽셀 높고 넓으며 페이지가 반복됩니다.

일반적으로 컨테이너가 커지거나 줄어들 때 컨테이너를 채우기 위해 늘이는 느낌을주기 위해 이미지를 컨테이너보다 크게 만듭니다. 컨테이너의 경계 외부에는 겹치는 부분이 표시되지 않습니다.

구부러진 가장자리가있는 상자와 같은 효과를 원한다면 상자의 왼쪽을 컨테이너의 왼쪽에 붙이고 컨테이너의 크기에 관계없이 (이유 내에서) 겹치지 않도록하십시오. 배경이 부족한 경우 가장자리가 구부러진 상자 오른쪽의 이미지를 레이어로 만들어 컨테이너 오른쪽에 배치합니다. 따라서 컨테이너가 축소되거나 커짐에 따라 곡선 상자 효과가 축소되거나 커지는 것처럼 보입니다. 실제로는 아니지만 실제로 일어나고있는 환상을 제공합니다.

컨테이너로 이미지를 축소하고 자르려면 이미지를 배경으로 사용하고 컨테이너로 크기를 조정하는 자바 스크립트로 보이도록 레이어링 트릭을 사용해야합니다. CSS로 이것을하는 현재 방법은 없습니다 ...

당신이 벡터 그래픽을 사용한다면, 당신은 내가 두려워하는 내 전문 영역을 벗어난 것입니다.

이것이 내가 만든 것입니다. 스트레치 클래스에서는 높이를 단순히로 변경했습니다 auto. 이렇게하면 배경 그림의 크기가 항상 화면 너비와 같고 높이가 항상 올바른 크기가됩니다.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

background-attachment라인을 추가하십시오 :

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

나는 이것이 수행하는 것과 동등하다는 것을 지적하고 싶다 :

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

- 이것에 대한 또 다른 좋은 해결책은 페이지의 몸이나 모든 요소에 적용 할 수 Srobbin의 Backstretch입니다 http://srobbin.com/jquery-plugins/backstretch/

이 시도

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

SolidSmile의 부정 행위에 대한 추가 팁은 너비를 설정하고 높이에 자동을 사용하여 크기를 조정하는 것입니다.

전의:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

이 border-image : yourimage속성을 사용하여 이미지를 설정하고 이미지를 화면이나 창의 전체 테두리까지 확대하십시오.