CSS 배경
CSS Background
CSS 배경 속성은 HTML 요소의 배경을 정의하는 데 사용됩니다.
CSS 속성은 배경 효과를 정의합니다.
background-color
background-image
배경 반복
배경 첨부
배경 위치
배경 color
background-color 속성은 요소의 배경색을 정의합니다.
페이지의 배경색은 본문 선택기에서 사용됩니다:
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好世界！这是来自 W3CSchoolphp中文网的实例。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
CSS에서 색상 값 일반적으로 다음과 같은 방식으로 정의됩니다.
Hex - 예: "#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>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하세요. 온라인 인스턴스 보기
배경 이미지
background-image 속성은 요소의 배경 이미지를 설명합니다.
기본적으로 배경 이미지는 전체 요소 엔터티를 덮도록 타일링되고 반복됩니다.
페이지 배경 이미지 설정 예:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d689a8a95760.gif');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>실행 인스턴스»
"인스턴스 실행" 버튼 클릭 온라인 예시 보기
다음은 잘못된 텍스트와 배경 이미지 조합의 예입니다. 텍스트 가독성 저하:
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7253c8e5996.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>
</html>인스턴스 실행»
온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 인스턴스
배경 이미지 - 가로 또는 세로 타일링
기본적으로 background-image 속성은 페이지를 가로 또는 세로 타일링합니다.
아래 그림과 같이 일부 이미지를 가로 및 세로로 타일링하면 매우 일관성이 없어 보입니다.
예
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
运行结果：
php工具인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
이미지가 가로로만 타일링된 경우(반복-x), 페이지 배경은 더 나아지기:
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
배경 이미지 - 위치 지정 또는 비타일링 설정
배경 이미지가 텍스트 레이아웃에 영향을 주지 않도록 합니다.
이미지를 원하지 않는 경우 타일링하면 배경 반복 속성을 사용할 수 있습니다:
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>인스턴스 실행»
"실행"을 클릭합니다. 인스턴스" 버튼을 누르면 온라인 인스턴스를 볼 수 있습니다
위의 예에서는 배경 이미지와 텍스트가 같은 위치에 표시됩니다. 페이지 레이아웃을 보다 합리적으로 만들고 읽기에 영향을 주지 않도록 하기 위해 텍스트를 사용하면 이미지의 위치를 변경할 수 있습니다.
background-position 속성을 사용하여 배경에서 이미지의 위치를 변경할 수 있습니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
배경 - 약칭 속성
위의 예에서는 페이지의 배경색이 제어할 속성이 많이 전달된 것을 볼 수 있습니다.
이러한 속성의 코드를 단순화하기 위해 이러한 속성을 동일한 속성에 결합할 수 있습니다.
배경색의 약어 속성은 "Background"입니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
축약형 속성을 사용하며, 속성값의 순서는 :
background-color
background-image
배경반복
배경부착
배경위치
위의 속성을 모두 사용할 필요는 없습니다.
이 예제에서는 앞서 소개한 CSS를 사용했습니다. CSS 예제를 참조하세요.
예제 더보기
고정 배경 이미지 설정 방법
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
<style>
body
{
background-image:url('https://img.php.cn/upload/image/904/696/399/1546677458497154.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼 클릭 온라인 예시 보기
이 예에서는 고정된 배경 이미지를 설정하는 방법을 보여줍니다. 이미지는 페이지의 나머지 부분과 함께 스크롤되지 않습니다.
CSS 배경 속성
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
