CSS 배경(배경)

face 규칙

CSS 배경 속성은 요소의 배경 스타일을 정의합니다. CSS 배경은 CSS를 통해 객체에 배경 속성을 설정하는 것을 의미합니다. 예를 들어 CSS를 통해 배경의 다양한 스타일을 설정합니다.

배경 속성background-color，background-image，background-repeat，background-attachment과background-positionCSS 스타일은 요소의 배경에 여러 가지 속성을 제공합니다. 예를 들어:

다음 장에서는 이러한 속성을 사용하여 배경에 다양한 스타일을 설정하는 방법을 설명합니다.

background-color배경색

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

아래의 예제를 참조하여 페이지의 배경 이미지를 설정하는 방법을 보여줍니다.-color:　#f0e68아래의 예제를 참조하여 웹 페이지의 배경색을 설정하는 방법을 보여줍니다.

c;}

• CSS에서의 색상은 다음과 같은 방법으로 지정됩니다：-16진 값

• 예를 들어 "#ff0000"-RGB 값255예를 들어 "rgb（

• ,0,0）-색상 이름

예를 들어 "빨강"보기CSS 색상 이름

가능한 색상 이름의 전체 목록을 얻으려면 확인하세요.

background-image배경 이미지

속성은 이미지를 HTML 요소의 배경으로 설정합니다.

아래의 예제를 참조하여 페이지의 배경 이미지를 설정하는 방법을 보여줍니다.-body {background

image: url("leaf.jpg");}

배경 반복background-image기본적으로, 이

속성을 사용하여 수평 및 수직 방향 모두에서 이미지를 반복합니다.background-repeat속성을 사용하여 HTML 요소의 배경에 배경 이미지를 어떻게 패턴으로 표시할지 제어할 수 있습니다. 수직(y축), 수평(x축), 양방향 또는 양방향 반복 배경 이미지를 설정할 수 있습니다.

아래의 예제를 참조하여 수평 반복 썬셋 이미지를 사용하여 웹 페이지의 변화하는 배경을 설정하는 방법을 보여줍니다.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

배경 연결

background-attachment속성이 뷰포트에 대한 배경 이미지가 고정되어 있는지 웹 블록과 함께 스크롤되는지 결정합니다.

body　{
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow:　scroll;
　　　　background-image:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

배경 위치

background-position속성은 배경 이미지 위치를 제어하는 속성입니다.

지정되지 않으면,background-position지정되면, 이미지는 요소의 기본 왼쪽 상단 위치에 배치됩니다. 즉,(0,0)。아래의 예제를 참조하세요:

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

아래의 예제에서 배경 이미지는 오른쪽 상단에 위치하고 있으며, 이미지 위치는 다음과 같이 지정됩니다.background-position속성을 지정합니다.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

배경 속성 단축

위의 예제에서 볼 수 있듯이, 배경을 처리할 때 많은 속성을 고려해야 합니다. 이러한 모든 속성을 하나의 속성 내에서 지정할 수도 있으며, 코드를 단축할 수 있습니다. 이를 단축 속성이라고 합니다.

의background속성은 모든 단일 배경 속성(즉, 약자 속성)background-color，background-image，background-repeat，background-attachment과background-position） 한 번에. 예를 들어:

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

단축 기호를 사용하면 위의 예제는 다음과 같이 작성될 수 있습니다:

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

사용background단축 속성을 사용할 때, 속성 값의 순서는 다음과 같아야 합니다.

배경：색 이미지 반복 부속 위치 ;

단축 기호를 사용할 때 단일 배경 속성의 값을 누락하거나 지정하지 않으면, 해당 속성의 기본 값(있을 경우)이 사용됩니다。