로컬 CSS 배경 이미지가 표시되지 않습니다.

Question

CSS에 로컬 background-image을 표시하려고합니다. index.html과 같은 폴더에 있으며 표시되지 않습니다.

.image { 
     width:100px; 
     background-image: url('PIC1.jpg'); 
    } 

도움을 주시면 감사하겠습니다.

Answer 1

이 http://jsfiddle.net/ce1j6k7k/2/ 당신이 차이

HTML

<div id="image"></div> 

CSS

#image{ 
width:300px; 
height:300px; 
background-image:url('http://placekitten.com/300/301'); 
} 

Answer 2

CSS에서 지정된 리소스는 CSS 파일을 참조하는 페이지가 아니라 CSS 파일의 경로를 기준으로 결정됩니다. PIC1.jpg은 CSS 파일 자체와 동일한 디렉토리/폴더에 있어야합니다.

CSS에서 생각하는대로 할 방법이 없습니다. 가능한 유스 케이스를 생각할 수 없기 때문에 그것은 좋은 일입니다. 모든 style.css 참조이 페이지를 상상해 :

/index.html 
/products/fish.html 
/user/account/orderHistory 

... style.css 참조 "foo.jpg는"다음 foo.jpg이 /foo.jpg, /products/foo.jpg 및 /user/account/foo.jpg에서 복제해야합니다.

Answer 3

나는 3 가지 가능한 문제를 생각할 수 있습니다. 먼저 이미지 경로. D : 예를 들어,이 이미지의 실제 경로는 경우 프로젝트 \ \ MyProject를 내용 \ 이미지 \ \ PIC1.jpg

이 코드에서이 작업을 수행해야

:

background-image: url('~\Content\Images\PIC1.jpg'); 

둘째, 폭이다 코드에서 설정 한 이미지 좌표가 이미지의 좌표와 일치하지 않습니다. 이 경우 코드를 변경하거나 이미지의 크기를 조정할 수 있습니다.

마지막으로 이미지가 페이지에로드되지 않고 페이지가 몇 번 새로 고침되어 표시 될 수 있습니다.