CSS의 배경 속성에 대한 간략한 토론

문서 트리의 각 요소는 직사각형 상자입니다. 이 상자에는 배경 레이어가 있습니다. 배경 레이어는 완전히 투명하거나 다른 색상일 수도 있고 그림일 수도 있습니다. 이 배경 레이어는 8개의 CSS 속성(+ 1개의 약식 속성)으로 제어됩니다.

background-color

background-color 속성은 요소의 배경색을 설정합니다. 해당 값은 유효한 색상 값이나 transparent 키워드일 수 있습니다.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

관련 튜토리얼: CSS 비디오 튜토리얼

배경색은 [Background-clip](#Backgroundclip) 속성으로 지정된 박스 모델 영역 내에 그려집니다. 배경 이미지도 설정되어 있으면 그 뒤에 색상 레이어가 그려집니다. 여러 개를 가질 수 있는 이미지 레이어와 달리 요소당 하나의 색상 레이어만 가질 수 있습니다.

Background-image

background-image 속성은 요소에 대한 하나 이상의 배경 이미지를 정의합니다. 해당 값은 일반적으로 url() 표기법으로 정의된 이미지의 URL입니다. 값으로 none을 사용할 수도 있지만 이렇게 하면 빈 배경 레이어가 생성됩니다

.left { background-image: url('ire.png'); }
.right { background-image: none; }

여러 배경 이미지를 쉼표로 구분하여 지정할 수도 있습니다. 다음 그림은 Z축 방향으로 이전 그림 뒤에 그려집니다.

.middle { 
  background-image: url('khaled.png'), url('ire.png');
  /* Other styles */
  background-repeat: no-repeat; 
  background-size: 100px;
}

background-repeat

background-repeat 속성은 [배경 크기](#배경 크기) 속성으로 크기를 조정하고 [배경 위치](#배경 위치)로 배치한 후 배경 이미지가 타일링되는 방식을 제어합니다. ) 기인하다 .

이 속성의 값은 반복-x, 반복-y, 반복, 공백, 라운드, 반복 없음 키워드일 수 있습니다. 반복-x 및 반복-y 외에도 다른 값을 한 번 정의할 수 있습니다. x축과 y축은 물론 각 차원을 독립적으로 정의할 수도 있습니다.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

background-size 속성은 배경 이미지의 크기를 정의하며 해당 값은 키워드, 길이 또는 백분율일 수 있습니다.

이 속성에 사용할 수 있는 키워드는 "포함"과 "표지"입니다. 포함은 최대 크기에 비례하여 이미지 크기를 조정합니다. 반면에 표지는 전체 배경 영역이 여전히 포함되는 가능한 가장 작은 크기로 이미지 크기를 조정합니다.

.left { 
  background-size: contain;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }

길이와 백분율의 경우 배경 이미지의 너비와 높이를 동시에 지정할 수 있으며 백분율 값은 요소의 크기를 기준으로 계산됩니다.

.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment

background-attachment 속성은 뷰포트 및 요소를 기준으로 배경 이미지가 스크롤되는 방식을 제어합니다. 여기에는 세 가지 잠재적인 값이 있습니다.

fixed는 배경 이미지가 뷰포트에 고정되어 사용자가 뷰포트를 따라 스크롤하더라도 움직이지 않는다는 의미입니다. 로컬은 배경 이미지가 요소 내의 해당 위치에 고정된다는 의미입니다. 요소가 스크롤 가능하고 배경 이미지가 상단에 배치된 경우 사용자가 요소를 아래로 스크롤하면 배경 이미지가 스크롤되어 보이지 않게 됩니다. 마지막으로 스크롤은 배경 이미지가 고정되어 요소 콘텐츠가 스크롤될 때 스크롤되지 않음을 의미합니다.

.left { 
  background-attachment: fixed;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }

background-position

이 속성은 background-origin 속성과 결합되어 배경 이미지의 시작 위치를 정의합니다. 해당 값은 키워드, 길이 또는 백분율이 될 수 있으며 x축과 y축을 따라 위치를 지정할 수 있습니다.

이 속성에 사용할 수 있는 키워드는 위쪽, 오른쪽, 아래쪽, 왼쪽, 가운데입니다. 이 키워드를 임의로 조합할 수 있습니다. 한 가지 키워드만 명시적으로 지정하면 다른 키워드는 기본값으로 가운데로 설정됩니다.

.top-left { 
  background-position: top;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /* Other styles same as .top-left */ }
.top-right { background-position: bottom;  /* Other styles same as .top-left */ }
.bottom-left { background-position: left;  /* Other styles same as .top-left */ }
.bottom-right { background-position: center;  /* Other styles same as .top-left */ }

길이와 백분율의 경우 x축과 y축을 따라 위치를 지정할 수도 있습니다. 백분율 값은 요소의 크기를 기준으로 계산됩니다.

.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }

background-origin

background-origin 속성은 배경 이미지가 배치되어야 하는 박스 모델의 영역을 지정합니다.

값이 border-box인 경우 배경 이미지는 테두리 영역을 기준으로 위치가 지정됩니다. padding-box인 경우에는 여백 영역을 기준으로 위치가 지정됩니다. 콘텐츠 영역에서

.left { 
  background-origin: border-box;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-origin: padding-box;  /* Other styles same as .left*/ }
.right { background-origin: content-box;  /* Other styles same as .left*/ }

background-clip

background-clip 속성은 배경을 그릴 수 있는 영역인 배경 그리기 영역을 결정합니다. background-origin 속성과 마찬가지로 박스 모델의 면적을 기준으로 합니다.

.left{ 
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a; 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-clip: padding-box;  /* Other styles same as .left*/ }
.right { background-clip: content-box;  /* Other styles same as .left*/ }

background

最后，background属性是其他背景相关属性的简写。子属性的顺序无关紧要，因为每个属性的数据类型不同。然而对于background-origin 和 background-clip，如果只指定了一个盒模型区域，那么这两个属性都会应用这个值。如果指定了两个，那么第一个值将用于background-origin属性。

위 내용은 CSS의 배경 속성에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!