CSS에서 Background와 Background-Color를 사용하는 것이 중요합니까? (네)

내가 받는 가장 일반적인 CSS 질문 중 하나는 CSS에서 background와 background-color의 차이점은 무엇입니까? 혼란스러운 이유는 개발자가 background-color를 사용하는 것을 자주 볼 수 있기 때문입니다. 및 background 요소에 배경색을 적용할 때 상호 교환 가능합니다.

그러나 그것들은 같지 않습니다. background (-color 제외) 속성은 할 수 있습니다. 모두를 설정하는 데 사용 하나의 선언에서 요소에 대한 배경 속성. 예를 들어 다음과 같이 배경색, 한 번 표시되는 이미지(반복 없음) 및 이미지 위치를 단일 선언의 요소에 모두 추가할 수 있습니다.

background: #444 url("image.jpg) no-repeat left top;

위와 같이 작성할 수도 있습니다.

background-image: url(“url/image.jpg”);

background-repeat: no-repeat;

background-position-x: left;

background-position-y: top;

background-color: #444;

따라서 background 속성은 한 줄에 여러 선언을 적용할 수 있는 편리한 약어로 사용할 수 있으며 많은 코드 줄을 절약할 수 있습니다.

<블록 인용>

선언 =CSS 속성 + 값.

background-color 반면에 속성은 배경 색상만 설정할 수 있습니다. 요소의. 더 큰 background의 하위 집합(일부)과 같습니다. 재산.

중요:background 속성은 모든 이전 선언을 재설정합니다 — 주의 !

이전에 요소에 다양한 배경 선언을 적용한 경우, 예를 들어 background-color 또는 background-image , 그리고 나중에 background: red를 추가합니다. 동일한 요소에 선언하면 모든 이전 선언이 재설정되며 이제 요소의 배경은 빨간색이고 배경 이미지는 사라집니다.

예시

세 개의 div가 있는 이 Pen 예제를 살펴보세요. 동일한 .box가 있는 요소 수업. 첫 번째 요소에는 .box만 있습니다. 클래스이지만 다른 클래스에는 .bg-red의 유틸리티(도우미) 클래스도 있습니다. 및 .bg-blue 각각.

CodePen 예제 참조.

차이점이 보이시나요?

두 번째 상자는 모두 빨간색이며 .box에도 불구하고 이미지가 없습니다. 클래스는 다른 두 요소와 동일한 JS 이미지를 가져야 한다고 명확하게 지정합니다.

HTML

<div class="box">

</div>

<div class="box bg-red">

</div>

<div class="box bg-blue">

</div>

CSS

.box {
	margin: 1rem;
	height: 100px;
	width: 150px;
	background-color: black;
	background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
	background-repeat: no-repeat;
}

.bg-red {
	background: red;
}

.bg-blue {
	background-color: blue;
}

CSS를 자세히 살펴보고 .bg-red를 비교하세요. 및 .bg-blue 속성. 빨간색 클래스는 '마스터'(올인원) background을 사용합니다. 속성은 빨간색 값을 설정하는 반면 파란색 클래스는 단일 목적의 background-color를 사용합니다. .

background .bg-red의 속성 클래스는 단순히 두 번째 div 요소에서 다른 모든 배경 선언을 제거합니다. 여기 -image , -repeat , -color 그런 다음 지정된 red를 추가합니다. 값을 해당 요소의 단일 배경 속성으로 사용합니다.

따라서 영향 특정 요소의 배경색은 background-color를 사용해야 합니다. , 아님 background 또는 해당 요소에 대한 이전 배경 선언을 덮어씁니다.

때때로 재설정 이전의 모든 선언은 정확히 원하는 것일 수 있습니다. 만질 수 없는(또는 하하하고 싶은) 많은 레거시 코드가 있는 웹사이트에서 작업할 수 있지만, 새로운 단수 선언 값, 예 color — background 사용 훌륭한 도구입니다.