CSS 파일이 하위 디렉토리에 있을 때 CSS 배경 선언에서 이미지 파일을 참조하는 방법은 무엇입니까?

CSS에서 배경 이미지 경로 설정

이 기사에서는 CSS 배경 선언에서 이미지 파일을 참조하는 방법을 살펴봅니다.

컨텍스트

개발자가 배경 이미지가 요소에 적용되지 않는 문제를 겪었습니다. 해당 CSS 파일은 Project/Web/Support/Styles/file.css 디렉터리에 있었고 이미지는 Project/Web/images/image.png 디렉터리에 있었습니다.

실패한 시도

개발자가 여러 경로 변형을 시도했지만 실패했습니다.

background-image: url(/images/image.png);
background-image: url('/images/image.png');
background-image: url("images/image.png");
background-image: url(../images/image.png);
background-image: url('../images/image.png');
background-image: url("..images/image.png");

해결책

해결책은 다음에 있습니다. CSS 파일 위치의 컨텍스트를 고려합니다. 이 경우 CSS 파일은 이미지 파일보다 두 수준 더 깊습니다. 따라서 이미지를 올바르게 참조하려면 경로는 디렉터리 구조에서 두 수준 위로 탐색을 나타내는 ".."의 두 인스턴스를 사용해야 합니다.

background-image: url('../../images/image.png');

이제 배경 이미지는 다음에서 예상대로 적용됩니다. 웹페이지.

위 내용은 CSS 파일이 하위 디렉토리에 있을 때 CSS 배경 선언에서 이미지 파일을 참조하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!