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를 사용할 수 있습니다. 상대 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 사양 .

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

(다른 모든 것들은 깨질 것이다, IMNSHO)

css의 자동 최소화를 사용할 때 발생할 수있는 문제 중 하나는이 문제를 해결하는 것 같습니다. 축소 된 번들의 요청 경로는 원래 CSS와 다른 경로를 가질 수 있습니다. 혼동 될 수 있으므로 자동으로 발생할 수 있습니다.

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

즉, 번들 이름을 원래 폴더 구조와 동일한 경로 (/와 함께)로 지정하십시오. 이렇게하면 글꼴과 같은 외부 리소스와 같은 이미지가 브라우저에 의해 올바른 URI로 매핑됩니다. 대안은 CSS에서 absolute url (refs)을 사용하는 것이지만 일반적으로 바람직하지 않습니다.

이것은 나를 위해 일했습니다. 두 개의 점과 슬래시를 추가합니다.

body{
    background: url(../images/yourimage.png);
}

다음을 사용하십시오.

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

Images 게시하려는 사진이있는 폴더입니다.