CSS 배경 확장 및 확장

CSS 배경 확장 및 확장

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

CSS 3 속성 사용background-size:

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

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

최신 브라우저에서는 다음을 사용하여 이를 수행할 수 있습니다.

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를 사용하여 이미지를 스케일링할 수는 없지만 다음과 같은 방법으로 동일한 효과를 얻을 수 있습니다.

다음 마크업 사용:

<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 Atribut을 사용합니다.

.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에도 관심이 있을 수 있습니다.

기사 배경 크기를 사용해 보십시오.다음 항목을 모두 사용하는 경우 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%;
} 

.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;
}

기능:

• Safari 3 이상
• Chrome Anything+
• 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/

지금은 없어요.CSS 3에서 사용할 수 있지만 대부분의 브라우저에서 구현될 때까지 시간이 걸립니다.

한마디로 '아니요'이미지를 확장하는 유일한 방법은<img>꼬리표를 달아요 창의력을 발휘해야 해요

이것은 답이 쓰여진 2008년에도 마찬가지였다.현재 최신 브라우저 지원background-size이 문제를 해결합니다.IE8은 지원하지 않습니다.

"신축과 축척"을 정의...

비트맵 포맷이 있는 경우 일반적으로 비트맵을 확장하거나 끌어당기는 것은 좋지 않습니다.반복 가능한 패턴을 사용하여 동일한 효과를 얻을 수 있습니다.예를 들어 페이지 아래쪽을 향해 가벼워지는 그라데이션이 있는 경우, 1픽셀의 너비로 컨테이너와 같은 높이(또는 배율을 고려하여 더 큰 것이 좋습니다)의 그래픽을 사용하여 페이지 전체에 걸쳐 타일을 붙입니다.마찬가지로, 그라데이션이 페이지를 가로지르는 경우, 이 그라데이션은 컨테이너보다 1픽셀 높이로 넓어지며 페이지 아래로 반복됩니다.

일반적으로 용기가 늘어나거나 축소될 때 용기를 채우기 위해 늘어나는 듯한 착각을 주기 위해 이미지를 용기보다 크게 만듭니다.겹치는 부분은 컨테이너의 경계 밖에 표시되지 않습니다.

모서리가 구부러진 상자 같은 것에 의존하는 효과를 원한다면, 상자의 왼쪽 면을 컨테이너의 왼쪽 면에 충분히 겹쳐서 붙입니다. 컨테이너의 크기가 아무리 크더라도,배경에서 떨어지지 않고 상자 오른쪽의 이미지를 곡선 모서리로 레이어드하여 용기 오른쪽에 배치합니다.따라서 용기가 축소 또는 성장함에 따라 구부러진 상자 효과는 그와 함께 축소 또는 커지는 것처럼 보입니다. 사실, 그것은 실제로 일어나지 않지만, 일어나고 있는 일을 착각하게 합니다.

실제로 이미지를 컨테이너와 함께 축소 및 성장시키려면 이미지를 배경으로 기능하는 것처럼 보이게 하는 레이어드 트릭과 컨테이너와 함께 크기를 조정하는 Javascript를 사용해야 합니다.CSS와 함께 할 수 있는 방법은 현재로선...

벡터 그래픽을 사용한다면 제 전문 분야 밖입니다.

★★★★★★★★★★★★★★★★★★★★★★★★★★ 트레치, 는는간 in in in in in in in in in in in in in in in in in in in in in in in in in in in in로 바꿨습니다.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;
}

Solid Smile의 치트 힌트는 너비를 설정하고 높이로 자동을 사용하여 스케일링(비례적인 크기 변경)하는 것입니다.

예:

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

속성을 사용하여 이미지를 설정하고 화면 또는 창의 전체 테두리까지 확대합니다.

언급URL : https://stackoverflow.com/questions/376253/stretch-and-scale-css-background