CSS 배경
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
배경 위치
위 속성을 모두 사용할 필요는 없으며 페이지의 실제 필요에 따라 사용하면 됩니다.
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 