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>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!