집 >웹 프론트엔드 >HTML 튜토리얼 >HTML의 배경을 설정하는 방법

HTML의 배경을 설정하는 방법

青灯夜游원래의: 2021-07-01 14:17:5762621검색

HTML에서 배경을 설정하는 방법: 1. body 태그의 bgcolor 속성을 사용하여 배경 색상을 설정합니다. 2. body 태그의 background 속성을 사용하여 배경 이미지를 설정합니다. body 태그를 추가하고 "배경: 색상 값/url('사진 경로')"를 추가합니다.

HTML의 배경을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

html 배경 설정

1 body 태그

bgcolor 속성의 bgcolor 속성은 문서의 배경색을 지정합니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
</body>
</html>

렌더링:

HTML의 배경을 설정하는 방법

참고: 색상 이름을 사용하면 브라우저마다 렌더링 구조가 달라집니다. RGB 코드를 사용하면 Firefox가 올바른 색상을 표시할 수 없습니다.

팁: 모든 브라우저가 동일한 색상을 표시하려면 16진수 색상 코드를 사용하세요.

2. body 태그의 배경 속성

배경 속성은 문서의 배경 이미지를 지정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body background="demo/img/1.jpg">
</body>
</html>

Rendering:

HTML의 배경을 설정하는 방법

3. CSS 배경 속성

배경 속성은 하나의 명령문으로 모든 배경 속성을 설정할 수 있는 단축 속성입니다.

설정할 수 있는 속성은 다음과 같습니다:

배경색
배경-위치
배경 크기
배경-반복
배경-원산지
배경 -clip
Background-attachment
Background-image

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{ 
background: pink url(&#39;smiley.gif&#39;) no-repeat fixed center; 
}
</style>
</head>

<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>

</html>

렌더링:

HTML의 배경을 설정하는 방법

HTML의 배경을 설정하는 방법

관련 기사