CSS 배경

CSS Background

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

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

Background-color
Background-image
Background-repeat
Background-attachment
ground -position

배경색

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

페이지의 배경색은 본문 선택기에 사용됩니다.

예

       <!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>你好！这是来自php中文网的实例。</p>

</body>
</html>

프로그램을 실행해 보세요. it

CSS , 색상 값은 일반적으로 다음과 같은 방식으로 정의됩니다.

Hex - 예: "#ff0000"

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

색상 이름 - 예: "red"

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

Example

        <!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

배경 이미지 속성

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

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

Example

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
            background-color:#cccccc;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

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

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

일부 이미지는 아래와 같이 가로 및 세로로 타일링된 경우 매우 일관성이 없어 보입니다.

예

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

이미지가 가로로만 타일링된 경우(반복-x) 페이지 배경이 더 좋아집니다.

예제

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
            background-repeat:repeat-x;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

위 프로그램을 실행해서 사용해 보세요

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

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

이미지 타일링을 원하지 않으면 background-repeat 속성을 사용할 수 있습니다. :

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
            background-repeat:no-repeat;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>

</html>

프로그램을 실행해서 사용해 보세요

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

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

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
            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:#ffffff url('/upload/course/000/000/006/58083c0089e20545.jpg') no-repeat right top;
            margin-right:200px;
        }
    </style>

</head>

<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</body>

</html>

프로그램을 실행하여 사용해 보세요

약칭 속성을 사용할 때 , 속성 값 순서는 다음과 같습니다.

배경-색상
배경-이미지
배경-반복
배경-부착
배경 위치

너는 그렇지 않아 위의 속성을 모두 사용할 필요는 없습니다.

CSS 배경 속성

Description 속성. , 명령문에서 배경 속성을 설정하는 데 사용됩니다. 배경 이미지가 고정되어 있는지 아니면 페이지의 나머지 부분과 함께 스크롤되는지 여부입니다. 요소의 배경색을 설정합니다. 이미지를 배경으로 설정하세요. 배경 이미지의 시작 위치를 설정합니다. 배경 이미지 반복 여부와 방식을 설정합니다.

	Background
	background-attachment
	background-color
	background-image
	배경 위치
	background-repeat

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background-image:url('https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg'); background-color:#cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>

제출하다 코드 재설정

자동운전