집 > 기사 > 웹 프론트엔드 > 적응형 전체 화면 웹 페이지 배경 이미지를 구현하기 위한 CSS에 대한 자세한 설명

적응형 전체 화면 웹 페이지 배경 이미지를 구현하기 위한 CSS에 대한 자세한 설명

小云云원래의: 2018-02-07 09:12:308363검색

이 글에서는 적응형 전체 화면 웹 페이지 배경 이미지를 구현하는 CSS 방식에 대한 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

웹 페이지 배경 적응형 전체 화면 .PNG

선명하고 아름다운 배경 이미지는 웹 페이지에 많은 포인트를 추가할 수 있습니다. 우리는 종종 페이지 배경에 큰 이미지를 사용하는 것을 원하지 않습니다. 이미지가 변형되어 화면이 클 때 배경이 노출되는 것을 원하지 않습니다. 즉, 변형되지 않고 화면 크기에 적응할 수 있는 큰 배경 이미지를 구현하는 것입니다. 배경 이미지는 스크롤 막대와 함께 스크롤되지 않습니다.

다음은 CSS로 구현하는 방법입니다.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</body>
</html>

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

이제 CSS의 각 코드의 기능을 분석해 보겠습니다.

  position:fixed;
  top: 0;
  left: 0;

The 세 개야 문장은 전체 p를 화면 상단과 왼쪽에 고정하는 것입니다

width:100%;
height:100%;
min-width: 1000px;

위의 처음 두 문장은 전체 p를 화면과 같은 크기로 만들어 전체 화면 효과를 구현하는 것입니다. min-width는 화면 너비가 1000px 이내일 때 구현에서 p의 크기를 변경하지 않고 유지합니다. 즉, 이 경우 화면 너비를 조정할 때 이미지의 크기가 조정되지 않습니다(1000px 이내에서만 유효함).

z-index:-10;

이 목적은 HTML 페이지의 각 레벨 아래에 전체 p를 만드는 것입니다. 일반적인 상황에서는 처음 생성된 레벨의 z-index 값이 0이므로 여기에 -1을 쓰면 을 달성할 수도 있지만 여기에 -10을 쓰는 것은 전체 p가 맨 아래에 있도록 하기 위한 것입니다. 왜냐하면 페이지에 너무 많은 레벨이 있는 경우 때로는 -1이 반드시 맨 아래에 있는 것은 아니지만 의미가 없기 때문입니다. -100처럼 큰 숫자로 쓰면. 배경 이미지처럼 보이도록 하려면 index:-10을 사용하세요. 실제로 가장 일반적인 p이지만, 계층적 관계가 배경 이미지처럼 보이도록 변경되었습니다.

background-repeat: no-repeat;

위는 배경이니 반복하지 마세요

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

위 세 문장은 화면 크기에 맞춰 그림 크기를 동기화한다는 의미로 동일하지만 일부 부분이 다를 수 있습니다. 아래 두 문장은 크롬, 오페라 브라우저와의 호환성을 위한 것입니다.

background-position: center 0;

위 문장은 사진의 위치를 의미하며, 중앙에 왼쪽으로 정렬됩니다.

적응형 전체 화면 웹 페이지 배경 이미지를 구현하기 위한 CSS에 대한 자세한 설명

관련 기사