CSS 배경 이미지를 적용하는 방법-CSS 튜토리얼-php.cn

CSS 배경 이미지를 적용하는 방법

anonymity

풀어 주다： 2019-05-28 15:06:48

원래의

8628명이 탐색했습니다.

선명하고 아름다운 배경 사진은 웹 페이지에 많은 포인트를 더할 수 있습니다. 디자이너들은 종종 페이지 배경에 큰 사진을 사용합니다. 우리는 사진이 해상도에 따라 변형되는 것을 원하지 않습니다. 큰 화면에서는 배경에 흰색 패치가 있습니다. 즉, 변형 없이 화면 크기에 적응할 수 있는 큰 배경 이미지를 달성하고 스크롤 막대가 스크롤될 때 배경 이미지가 스크롤되지 않아 적응을 실현합니다. 배경 이미지의

CSS 배경 이미지를 적용하는 방법

다음은 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>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... -->
</div>
</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;

로그인 후 복사

이 세 가지입니다. line 전체 div를 화면 상단과 왼쪽에 고정하는 것입니다

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

로그인 후 복사

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

 z-index:-10;

로그인 후 복사

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

 background-repeat: no-repeat;

로그인 후 복사

위는 배경입니다. 반복하지 마세요

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

로그인 후 복사

위 세 문장은 같은 의미로 화면 크기에 맞춰 사진 크기를 동기화하지만 일부 부분이 잘릴 수 있지만 그렇지 않습니다. 다음 두 문장은 Chrome 및 Opera 브라우저와 호환됩니다.

 background-position: center 0;

로그인 후 복사

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

위 내용은 CSS 배경 이미지를 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!