CSS의 상대 경로는 CSS 파일 자체와 관련이 있습니까?

CSS 상대 경로: 참조점 이해

CSS에서는 이미지와 같은 외부 리소스를 참조하기 위해 상대 경로를 사용하는 것이 실용적인 접근 방식이 될 수 있습니다. . 그러나 이러한 경로가 상대적인 위치를 이해하는 것이 중요합니다.

CSS 파일의 상대 경로는 CSS 파일을 기준으로 합니까?

대답은 다음과 같습니다. 예. CSS의 상대 경로는 CSS 파일 자체의 위치를 ​​기준으로 확인됩니다. 즉, 이미지나 기타 외부 리소스에 대한 상대 경로를 지정하면 브라우저는 CSS 파일과 동일한 폴더에서 시작하여 파일을 검색합니다.

예

다음 시나리오를 고려하십시오.

• 페이지: page.htm(위치: 위치는 중요하지 않음)
• CSS: /resources/css/styles.css
• 이미지: /resources/images/image.jpg

styles.css의 다음 CSS 코드는 상대 경로를 사용하여 이미지를 참조합니다.

div { background-image: url('../images/image.jpg'); }

이 예에서는 , 상대 경로 "../images/image.jpg"는 다음을 의미합니다.

• 한 디렉터리 수준 위로 이동(경로에서 ".."로 표시됨)
• " Images" 디렉터리
• "image.jpg" 파일 찾기

브라우저는 styles.css 위치("/resources/css/)를 기준으로 이 상대 경로를 해석합니다. ,"를 입력하고 "/resources/images/image.jpg"에서 이미지를 성공적으로 찾습니다.

위 내용은 CSS의 상대 경로는 CSS 파일 자체와 관련이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!