집 > 기사 > 웹 프론트엔드 > HTML에서 웹 페이지의 배경 이미지를 설정하는 방법

HTML에서 웹 페이지의 배경 이미지를 설정하는 방법

php中世界最好的语言원래의: 2017-11-23 14:00:5243753검색

오늘은 HTML에서 웹페이지의 배경 이미지를 설정하는 방법을 알려드리겠습니다. 웹페이지 전체를 생각하여 레이아웃을 활용하여 어떤 방법을 설정할 수 있는지, 각 방법의 차이점은 무엇인지 알아보겠습니다. 그리고 배경 이미지 설정 팁

웹페이지 단색 배경

순색 웹페이지 배경이 있는 경우 배경본문 배경색

body{배경:#FFF}

만 설정하면 됩니다. 웹 페이지 배경을 흰색으로 설정하세요

body{Background:#FFF url(bg.gif)peat-x 0}

이 그림을 이렇게 설정하세요. 배경 그림이 웹 상단에 가로로 타일링되어 있습니다. 페이지의 배경은 흰색입니다. 여기서는 이미지 경로에 따라 가져오기 설정에 주의하세요.

2. 가로 타일 배경 이미지

예를 들어 2014년 버전의 웹페이지도 그라데이션 타일과 같은 원리로 세로 띠를 잘라내어 가로로 타일을 붙이는 방식으로 본문 배경을 사용합니다. 전체 화면 웹 페이지의 배경이 가려집니다.

코드는 첫 번째 코드와 동일하고 사진만 다릅니다. 바디에 가로로 타일링될 배경 이미지를 설정합니다.

불규칙한 큰 그림 배경

일부 주제별 또는 이미지 웹 페이지를 자주 보는데, 배경은 배경처럼 매우 큰 그림이며 일반적으로 와이드스크린 모니터와 내로우스크린 모니터 모두 그림처럼 전체 화면 배경 그림을 표시할 수 있습니다. 동일한 너비와 크기로 조정합니다. 실제로 이 구현은 매우 간단합니다. 예를 들어, 시장에서 가장 넓은 디스플레이 화면 해상도의 너비는 2560픽셀입니다. 이 웹 페이지는 전체 화면을 채울 수 있습니다. 그러면 배경 이미지는 2560px 이상의 너비로 만들어져야 합니다. 이렇게 하면 웹 페이지를 와이드 스크린이나 좁은 화면 모니터에서 열 때 전체 화면을 채울 수 있습니다. 브라우저 창을 최소화, 최대화 또는 변경할 때 배경 이미지를 전체 화면으로 열 수 있습니다. 중앙에 있는 것은 배경 이미지가 적응적으로 크기가 조정되는 것처럼 보입니다.

핵심: 전체 화면 적응형 배경 이미지의 핵심은 가장 넓은 해상도에서 화면을 채울 수 있도록 이미지를 충분히 넓게 만드는 것입니다. 더 작은 해상도에서도 자연스럽게 채워집니다. 동시에 이와 같은 배경 이미지를 본문 배경으로 설정하고 중앙에 배치해야 합니다.

이 배경 이미지가 다음과 같다고 가정합니다: bg.jpg

CSS 코드 설정:

body{background: url(bg.jpg) no-repeat center 0}

코드 설명: 이 이미지를 웹 페이지의 배경으로 설정합니다. 일반적으로 타일링되지 않고(반복 없음) 가로 중앙에 표시됩니다. on the top

head 배경 이미지와 하단 배경 이미지 내용의 높이는 늘리거나 줄일 수 있지만 머리와 하단 배경은 변경되지 않습니다.

다음은 레이아웃을 설정하는 두 가지 일반적인 머리 및 하단 배경 이미지 기술입니다.

body{background: url(bg.jpg) no-repeat center 0} 
#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

이렇게 하면 콘텐츠 높이에 영향을 받지 않고 머리 아래쪽에서 다양한 배경을 얻을 수 있습니다.

이러한 구조는 상단과 하단의 그림이 다르며, 중간 내용이 늘어나도 배경 레이아웃에 영향을 주지 않습니다. 이는 일반적으로 html 태그 및 본문에 배경을 설정하면 가능합니다.

상단 진한 파란색 배경 이미지가 "top.jpg"이고 하단 연한 파란색 배경 이미지가 "foot.jpg"라고 가정합니다.

DIV CSS는 웹 페이지 배경 키를 설정합니다. CSS 코드:

html{background: url(top.jpg) no-repeat center 0} 
body{background: url(foot.jpg) no-repeat center bottom}

설명: 진한 파란색을 설정합니다. HTML 배경에서 가로 중앙에 배치되는 배경 이미지 Up; 연한 파란색 배경 이미지를 본문 배경 이미지로 가로 중앙에 배치하고 아래에 배치합니다.

위는 몇 가지 일반적인 웹 페이지 배경 레이아웃 설정에 대한 요약입니다. div를 이 웹 페이지의 배경으로 설정하면 본문, HTML 및 div의 배경을 설정할 수 있습니다. 그러면 이 DIV의 높이를 설정할 수 없으며(기본값은 자동) div 너비를 100%로 설정할 수 있습니다.

웹 페이지 배경 이미지 설정은 여기까지입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!