적응형 전체 화면 웹 페이지 배경 이미지를 구현하기 위한 CSS에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

小云云

Feb 07, 2018 am 09:12 AM

css배경 이미지

이 글에서는 적응형 전체 화면 웹 페이지 배경 이미지를 구현하는 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;

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

관련 기사

슬라이드 아웃 바닥 글Apr 09, 2025 am 11:50 AM

마크 업이라는 매혹적인 새 사이트가 방금 시작되었습니다. 태그 라인 : Big Tech가 당신을보고 있습니다. 우리는 큰 기술을보고 있습니다. 위의 위대한 일. 그만큼

좋아하는 페이지Apr 09, 2025 am 11:47 AM

나는 다른 날 JavaScript로 RSS 피드를 구문 분석하는 것에 대해 게시했습니다. 또한 RSS 설정에 대해 Feedbin이 어떻게 핵심인지에 대해 이야기했습니다.

Codepen Gutenberg Embed Block for Sanity.io를 재현합니다Apr 09, 2025 am 11:43 AM

Chris Coyier의 WordPress의 Gutenberg 편집기 구현에서 영감을 얻은 Sanity Studio를위한 미리보기로 사용자 정의 코드펜 블록을 만드는 방법에 대해 알아보십시오.

CSS와 라인 차트를 만드는 방법Apr 09, 2025 am 11:36 AM

라인, 바 및 파이 차트는 대시 보드의 빵과 버터이며 모든 데이터 시각화 툴킷의 기본 구성 요소입니다. 물론 SVG를 사용할 수 있습니다

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

PHP 템플릿에 대한 후속 조치Apr 09, 2025 am 11:14 AM

얼마 전, PHP 템플릿에 대해 PHP (기본적으로 HEREDOC 구문)에 대해 게시했습니다. 나는 문자 그대로 그 기술을 사용하여 슈퍼 기본을 사용합니다

부트 스트랩 구성 요소가있는 모달 이미지 갤러리 생성Apr 09, 2025 am 11:10 AM

다른 사진을보기 위해 탐색으로 더 큰 버전의 이미지를 열어주는 웹 페이지의 이미지를 클릭 한 적이 있습니까?

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.