[css] CSS 만 사용하여 백그라운드에서 CSS 이미지 확장 및 크기 조정

Program / 글쓴이

브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기를 조정하고 싶습니다.

CSS 오버플로 및 크기 조정과 같은 작업을 수행하는 스택 오버플로에 대한 몇 가지 질문을 보았습니다 . 잘 작동하지만 태그가 background아닌을 사용하여 이미지를 배치하고 싶습니다 img.

그 중 하나에 img태그가 배치 된 다음 CSS를 사용하여 img태그에 경의를 표합니다 .

width:100%; height:100%;

작동하지만 그 질문은 조금 오래되었으며 CSS 3에서는 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 시도했지만 나에게 적합하지 않았습니다.

background-image선언 과 함께하는 좋은 방법이 있습니까?

답변

CSS3에는라는 멋진 속성이 background-size:cover있습니다.

가로 세로 비율을 유지하면서 배경 영역을 배경 이미지로 완전히 덮도록 이미지의 크기를 조정합니다. 전체 영역을 다룹니다. 그러나 크기가 조정 된 이미지의 너비 / 높이가 너무 크면 이미지의 일부가 보이지 않을 수 있습니다.

답변

CSS3 속성을 사용하여 아주 잘 할 수 있습니다. 작은 이미지는 업 스케일되지만 이미지 왜곡이없는 비율로 크기가 조정됩니다. 아직 모든 브라우저에서 구현되지는 않았습니다.

background-size: 100%;

답변

내가 언급 한 코드를 사용하여 …

HTML

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

CSS

#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

원하는 효과를냅니다. 배경이 아닌 내용 만 스크롤됩니다.

배경 이미지는 모든 화면 크기에 대해 브라우저 뷰포트로 크기가 조정됩니다. 컨텐츠가 브라우저 뷰포트에 맞지 않고 사용자가 페이지를 스크롤해야하는 경우 컨텐츠가 스크롤되는 동안 배경 이미지가 뷰포트에 고정 된 상태로 유지됩니다.

CSS 3을 사용하면 훨씬 쉬울 것 같습니다.

답변

CSS :

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

답변

background-size: 100% 100%;

배경을 늘려 두 축의 전체 요소를 채 웁니다.

답변

다음 CSS 부분은 모든 브라우저에서 이미지를 늘려야합니다.

각 페이지마다 동적으로 수행합니다. 따라서 PHP를 사용하여 각 페이지마다 고유 한 HTML 태그를 생성합니다. 모든 사진은 ‘image’폴더에 있으며 ‘Bg.jpg’로 끝납니다.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

모든 페이지에 대해 하나의 배경 그림 만있는 경우 $pic변수를 제거하고 이스케이프 백 슬래시를 제거하고 경로를 조정하고이 코드를 CSS 파일에 배치 할 수 있습니다.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Internet Explorer 9, Chrome 21 및 Firefox 14에서 테스트되었습니다.

답변

실제로 img 태그를 사용하면 배경 이미지와 동일한 효과를 얻을 수 있습니다. z-index를 다른 것보다 낮게 설정하고 position : absolute를 설정하고 전경의 모든 상자에 투명한 배경을 사용해야합니다.