CSS 배경

CSS 배경 속성은 HTML 요소의 배경을 정의하는 데 사용됩니다.

CSS 속성은 배경 효과를 정의합니다:

배경색

배경 이미지

배경 반복

배경 첨부

배경 위치

배경 색상

배경 색상 속성은 요소의 배경 색상을 정의합니다.

CSS에서는 일반적으로 색상 값이 정의됩니다. 다음과 같은 방식으로:

16진수 - 예: "#ff0000"

RGB - 예: "rgb(255,0,0)"

색상 이름 - 예: "red"

다음 예에서 h1, p 및 div 요소는 서로 다른 배경색을 갖습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<div>
床前明月光，
<p>疑是地上霜。</p>
举头望明月，
<p>低头思故乡。</p>
</div>
</body>
</html>

배경 이미지

배경 이미지 속성 요소의 배경 이미지를 설명합니다.

기본적으로 배경 이미지는 타일링되어 전체 요소 개체를 덮도록 반복됩니다.

페이지 배경 이미지 설정 예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片背景测试</title> 
<style>
body 
{
background-image:url('http://pic.58pic.com/58pic/14/94/21/80U58PICPJM_1024.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>

배경 이미지 - 수평 또는 수직 타일

기본적으로 background-image 속성은 페이지를 수평 또는 수직으로 타일링합니다.

아래 그림과 같이 일부 이미지가 수평 및 수직으로 타일링되면 일관성이 없어 보입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片背景测试</title> 
<style>
body 
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>

이미지가 수평으로만 타일링된 경우(repeat-x), 이미지가 수평으로만 타일링된 경우( 반복-y).

배경 이미지 - 위치 지정 또는 비타일링 설정

배경 이미지가 텍스트 레이아웃에 영향을 주지 않도록 합니다.

이미지 타일링을 원하지 않는 경우, background-repeat 속성을 사용할 수 있습니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片背景测试</title> 
<style>
body 
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
background-repeat:no-repeat
}
</style>
</head>
<body>
<div>
<h1>明天你好！！</h1>
</div>
</body>
</html>

위의 예에서는 페이지 레이아웃을 보다 합리적으로 만들고 텍스트 읽기에 영향을 주지 않도록 배경 이미지와 텍스트가 동일한 위치에 표시됩니다. , 이미지의 위치를 변경할 수 있습니다.

background-position 속성을 사용하여 배경에서 이미지의 위치를 변경할 수 있습니다

background-position:right top;

Background - 약칭 속성

위의 예에서 페이지의 배경색이 많은 속성에 의해 제어되는 것을 볼 수 있습니다.

이러한 속성의 코드를 단순화하기 위해 이러한 속성을 동일한 속성에 결합할 수 있습니다.

배경색의 약어 속성은 "Background"입니다.

약어 속성을 사용하면 속성 값의 순서는 다음과 같습니다: attachment

배경 위치

위 속성을 모두 사용할 필요는 없으며 페이지의 실제 필요에 따라 사용하면 됩니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片背景测试</title> <style> body { background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg'); background-repeat:no-repeat } </style> </head> <body> <div> <h1>明天你好！！</h1> </div> </body> </html>

제출하다 코드 재설정

자동운전