CSS 파일의 상대 URL을 사용하면 상대적인 위치는 어디입니까?

Question

CSS 파일에서 배경 이미지 URL과 같은 것을 정의 할 때 상대 URL을 사용할 때 상대적인 위치는 어디입니까? 예를 들어 :

는 /stylesheets/base-styles.css가 포함 된 파일을 가정 :

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

나는 CSS 파일에 상대 URL이 /stylesheets/에서 스타일 시트 문서에 상대가 될 것입니다 <link ... />를 통해 다른 문서에이 스타일 시트를 포함하는 경우 또는 현재 문서에 상대적인 이 포함되어 있습니까? 가능한 경로 :

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

Answer 1

W3에있어서, 상기 문서에

부분 URL은 스타일 시트의 소스에 상대적으로 해석됩니다 상대하지

따라서 귀하의 질문에 대한 대답은과 관련이 있습니다..

CSS 파일을 다른 디렉토리의 페이지에 추가 할 수 있으므로 CSS 파일을 CSS 파일로 표준화하면 스타일 시트가 링크되어있는 위치에서 URL이 작동한다는 의미입니다.

Answer 2

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

Answer 3

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

(다른 건은, IMNSHO 깨진 것)

Answer 4

리소스의 절대 위치에 의존하지 않는 모듈 스타일 시트를 만들려면 제작자가 상대 URI를 사용할 수 있습니다. 상대 URI ([RFC3986]에 정의 된대로)는 기본 URI를 사용하여 전체 URI로 확인됩니다. RFC 3986, 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 spec.

Answer 5

그것은 스타일 시트를 기준으로하지만 나는 당신의 URL에 URL이 상대적으로 만드는 것을 권 해드립니다 :

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

그런 식으로, 당신은 미래를 리팩토링 할 필요없이 주위에 당신의 파일을 이동할 수 있습니다.

Answer 6

발생할 수있는 한 가지 문제점은 CSS의 자동 최소화를 사용하는 경우입니다. 축소 된 번들의 요청 경로는 원본 CSS와 다른 경로를 가질 수 있습니다. 이것은 혼란을 야기 할 수 있으므로 자동으로 발생할 수 있습니다.

축소 된 번들에 대한 매핑 된 요청 경로는 "minifiedbundlename"뿐만 아니라 "/ originalcssfolder/minifiedbundlename"이어야합니다.

즉, 번들의 이름을 원래 폴더 구조와 같은 (/)로 지정하면 글꼴과 같은 외부 리소스가 브라우저에서 올바른 URI로 매핑됩니다. 대안은 당신의 CSS에서 절대 URL (심판을 사용하는 것입니다하지만 일반적으로 바람직하지 않다

Answer 7

사용해보십시오 :..

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

Images되는 폴더에는 게시 할 사진을 들고