CSS의 이미지 경로

Question

CSS 프레임 워크를 사용 중이고 아이콘 (배경 이미지 속성이있는 클래스 선택기 사용)을 표시하려고합니다. 말을하자, 내 파일 구조는 다음과 같습니다

@include "Folder2/framework-images.css"; 
... 

프레임 워크 images.css : 같은

@include "Folder1/framework.css"; 
... 

framework.css :

Content/site.css 
Content/Folder1/framework.css 
Content/Folder1/Folder2  /framework-images.css 
Content/Folder1/Folder2  /framework-icon1.png 

site.css처럼 보이는 :

,451,515,

.selector { 
    background-image: url("icon1.png"); 
} 

하지만 파이어 폭스 개발 도구 내 HTML 요소 클래스 "선택"에 추가려고 할 때 여기에서 아이콘을로드하려고 저를 보여줍니다

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png 

을 올바른 경로 (오전되는 동안 맞지?) :

~/Content/Folder1/Folder2/icon.png 

하거나

http://localhost:1234/Content/Folder1/Folder2/icon.png 

그래서 될 수 있습니다 실수? 올바른 경로를 사용하도록 클라이언트에게 알려주는 방법은 무엇입니까?

P. 그것이 중요한 경우 나는 dotless (Less CSS)를 사용하고있다. 다른 단어, 모두 .css은 실제로 .less입니다.

P.P.S. 이것은 ASP.NET MVC4 응용 프로그램입니다.

업데이트 : 홈페이지 (...) : 같이 @djfarrelly, 문제가 배경 이미지에 잘못된 경로에 있었다 지적했다. 나는 그것을 다음과 같이 바꿨다 :

background-image: url("/Content/Folder1/Folder2/Icon1.png"); 

그리고 그것이 작동하기 시작했다. 하지만 여전히 혼란 스럽습니다. 누구든지 전체 경로 지정없이 작동하지 않는 이유를 설명 할 수 있습니까?

Answer 1

이미지에 대한 모든 참조는 혼동을 피하기 위해 웹 사이트의 루트 폴더를 참조해야합니다. 루트에서 참조로 CSS를 변경하는 것을 시도했다 : 당신이 그것을 청소해야 /을 포함하는 경우

.selector { 
    background-image: url("/Content/Folder1/Folder2/icon1.png"); 
} 

.

편집 : 나는 원래 루트 폴더를 참조하여 정확한 /의/../ 승이 게시 .