background : none vs background : transparent 차이점은 무엇입니까?

이 두 CSS 속성 간에 차이점 이 있습니까?

background: none;
background: transparent;

1. 둘 다 유효합니까?
2. 어떤 것을 사용해야하며 그 이유는 무엇입니까?

그들 사이에는 차이가 없습니다.

background약어 인 6 개의 속성에 대한 값을 지정하지 않으면 기본값으로 설정됩니다. none및 transparent기본값입니다.

하나는 background-imageto를 명시 적으로 설정 none하고 암시 적으로 background-colorto를 설정합니다 transparent. 다른 하나는 반대입니다.

@Quentin에 대한 추가 정보 와 그가 올바르게 말했듯이 backgroundCSS 속성 자체는 다음의 약어입니다.

background-color
background-image
background-repeat
background-attachment
background-position

즉, 다음과 같이 모든 스타일을 하나로 그룹화 할 수 있습니다.

background: red url(../img.jpg) 0 0 no-repeat fixed;

이것은 (이 예에서) 다음과 같습니다.

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

그래서 ... 당신이 설정할 때 : background:none;
당신은 모든 배경 속성이 none 으로 설정되어
있다고 말하는 것입니다 ... 당신은 그 background-image: none;와 다른 모든 것들이 initial상태에 있다고 말하는 것입니다 (선언되지 않았기 때문입니다).
그래서 background:none;:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

이제 색상 만 정의하면 (귀하의 경우 transparent) 기본적으로 다음과 같이 말합니다.

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

@Quentin 이이 경우default transparent 및 none값 이 동일 하다고 올바르게 말했듯 이 반복 하므로 귀하의 예와 원래 질문에 대해 아니오, 둘 사이에 차이가 없습니다.

하지만! .. 당신이 background:noneVs 라고 말하면 background:red예 ... 내가 말했듯이, 첫 번째는 모든 속성을로 설정 none/default하고 두 번째는 변경 color만하고 나머지는 그의 default상태로 유지합니다 .

요약하자면 :

짧은 답변 : 아니요, 전혀 차이가 없습니다 (예제와 원래 질문에서)
긴 답변 : 예, 큰 차이가 있지만 속성에 부여 된 속성에 직접적으로 의존합니다.

Upd1 : 초기 값 (일명 default)

초기 값은 긴 속성의 초기 값을 연결 한 것입니다.

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

여기에서 더 많은 background설명 보기

Upd2 : background:none;사양을 더 잘 설명합니다 .

다른 답변을 보완하려면 : 초기 값으로 모든 배경 속성을 (이 포함 재설정하려는 경우 background-color: transparent와 background-image: none명시 적으로 값을 지정하지 않고) transparent또는 none, 당신은 서면으로 그렇게 할 수 있습니다 :

background: initial;