배경 이미지 오류: 잘못된 연산자 식별

약칭 표기법을 사용하여 배경 이미지로 div 요소의 스타일을 지정하려고 하면 일부 사용자에게 다음과 같은 문제가 발생합니다. 잘못된 연산자에 관한 오류:

오류: CSS: 배경: /는 잘못된 연산자입니다.

이 문제를 해결하려면 문제가 발생하면 배경 속성의 올바른 구문을 이해하는 것이 중요합니다. CSS 사양에 따르면 / 문자는 background-position과 background-size 속성 사이의 구분 기호 역할을 합니다.

다음 CSS 조각은 올바른 사용법을 보여줍니다.

div {
  height: 100%;
  background: url('...') 100% 0/4% no-repeat;
}

이 예에서 "url(...) 100% 0"은 배경의 위치를 ​​나타내고 "4%"는 크기를 나타냅니다. background-size는 선택 사항이지만 단축 표기법을 사용할 때는 background-position과 함께 지정해야 한다는 점에 유의하는 것이 중요합니다.

/ 구분 기호를 생략하거나 속성 사이에 잘못 배치하면 잘못된 연산자 오류가 발생할 수 있습니다. 또한 위치 없이 크기를 지정하는 것이 중요합니다. 예를 들어 다음 CSS 코드는 유효합니다.

div {
  height: 100%;
  background: url(...) 100% 0 no-repeat;
}