CSS 파일에서 상대 URL을 사용하면 어느 위치와 관련이 있습니까?

CSS 파일에서 상대 URL을 사용하면 어느 위치와 관련이 있습니까?

CSS 파일에서 배경 이미지 URL과 같은 것을 정의할 때 상대 URL을 사용할 때 어디와 관련이 있습니까?예를 들어,

파일을 가정해 보겠습니다./stylesheets/base-styles.css포함 내용:

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

이 스타일시트를 다른 문서에 포함하는 경우<link ... />CSS 파일의 상대적인 URL이 스타일시트 문서와 상대적이 될 것인가요./stylesheets/아니면 현재 문서에 포함되어 있는 것과 관련이 있습니까?가능한 경로:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

W3 기준:

부분 URL은 문서가 아닌 스타일 시트의 원본에 대해 해석됩니다.

그러므로, 당신의 질문에 대한 답으로, 그것은 다음과 관련이 있을 것입니다./stylesheets/.

CSS 파일을 다른 디렉토리의 페이지에 추가할 수 있으므로 CSS 파일로 표준화하면 스타일시트가 연결된 곳에서 URL이 작동합니다.

CSS 파일과 관련이 있습니다.

스타일시트와 관계가 있지만 URL과 관계가 있는 URL을 만드는 것이 좋습니다.

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

이렇게 하면 나중에 파일을 재분류할 필요 없이 파일을 이동할 수 있습니다.

리소스의 절대 위치에 의존하지 않는 모듈식 스타일 시트를 만들기 위해 작성자는 상대적인 URI를 사용할 수 있습니다.([RFC3986]에 정의된) 상대 URI는 기본 URI를 사용하여 전체 URI로 해결됩니다. RFC3986 섹션 5는 이 프로세스에 대한 규범 알고리즘을 정의합니다.CSS 스타일시트의 경우 기본 URI는 소스 문서가 아닌 스타일시트의 URI입니다.

예를 들어 다음과 같은 규칙을 가정합니다.

body { background: url("yellow") }

는 URI에 의해 지정된 스타일시트에 위치합니다.

http://www.example.org/style/basic.css

원본 문서의 BODY 배경은 URI가 지정한 리소스에 의해 설명된 이미지로 타일 처리됩니다.

http://www.example.org/style/yellow

사용자 에이전트는 사용할 수 없거나 적용할 수 없는 리소스를 지정하는 잘못된 URI 또는 URI를 처리하는 방식이 다를 수 있습니다.

CSS 2.1 사양에서 가져온 것입니다.

CSS 스타일시트의 경우 기본 URI는 소스 문서가 아닌 스타일시트의 URI입니다.

(다른 건 다 깨질 거예요, IMNSHO)

발생할 수 있는 한 가지 문제는 css의 자동 최소화를 사용할 때입니다.최소화된 번들의 요청 경로는 원래 css와 다른 경로를 가질 수 있습니다.이는 자동적으로 발생하기 때문에 혼란을 야기할 수 있습니다.

최소화된 번들의 매핑된 요청 경로는 "최소화된 번들 이름"이 아니라 "/original cssfolder/minized 번들 이름"이어야 합니다.

다시 말해, 원래 폴더 구조와 동일한 경로(/)를 갖도록 번들 이름을 지정하면 글꼴, 이미지와 같은 외부 리소스가 브라우저에 의해 올바른 URI로 매핑됩니다.대안은 absolute url(css에 있는 참조)을 사용하는 것입니다. 하지만 그것은 보통 바람직하지 않습니다.

다음을 사용해 보십시오.

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images당신이 게시하고 싶은 사진을 보관하고 있는 폴더입니다.

언급URL : https://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to