배경 이미지가 표시되지 않습니다

Question

다음은 내 사이드 ​​바에 대한 HTML 및 CSS 코드입니다.

<div id="sidebar"> 
    <header> 
    <h3 class="site-title">The Code Stitchery</h3> 
</header> 
<nav> 
    <ul> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</div> 

CSS

nav a { 
    background: url(/Images/tape_measure_unit.png) no-repeat; 
    display: block; 
    padding: 2px 4px; 
    text-align: center; 
    width: 256px; 
    height: 36px; 
} 

배경 이미지는 이클립스의 웹 페이지 편집기에서 잘 표시,하지만 웹 브라우저에서 동일한 페이지를 엽니 다 갈 때, 텍스트 만 보이고있다. I는 다음과 같은 몇 가지 다른 게시물에서 권장 사항을 시도했다 :

• Background Image won't show up in CSS unless I load an image using the <img> tag in HTML
• Background images not appearing
• Background image wont show up

하지만, 난 여전히 난처한 상황에 빠진거야.

이 사이드 바는 이클립스의 웹 페이지 편집기에서 모습입니다 : 제대로 보여주기 위해 이미지를 얻기위한

모든 팁 :

이는 모질라 파이어 폭스의 모습입니다?

Answer 1

이미지의 URL (/Images/tape_measure_unit.png)에서 절대 경로를 사용하는 경우 브라우저에서 home.html 파일에 액세스하면 그 경로는 드라이브 문자의 절대 경로가됩니다 : file:///C:/Images/tape_measure_unit.png. 네 이미지가 그곳에 사는 것 같지 않아?

CSS 파일 (또는 HTML 파일이없는 경우)의 위치를 ​​기준으로 이미지 경로를 지정합니다. 예를 들어,

 background: url(../Images/tape_measure_unit.png) no-repeat; 
        /**NOTE THE PERIOD BEFORE THE SLASH.**/ 

이 모든 것을 웹 서버에 배포하면 절대 경로가 적합 할 수 있습니다. 예를 들어 웹 서버의 로컬 경로가 로컬 codestitchery 폴더에 해당하면 이미지 경로가 작동합니다.

Answer 2

코드는 나에게 일을 나타납니다

http://jsfiddle.net/GzzWU/

는 브라우저가 CSS의 콘텐츠의 경우 이전 버전을 캐시 있지 않은지 확인이 있습니까? 이런 문제를 테스트/디버깅 할 때 공통적 인 문제입니다. 당신이 IE에서 테스트를하게된다면 (크롬과 파이어 폭스는 모두 업데이트 된 버전을 다운로드하는 대신 캐시 된 스타일 시트를 재사용하는 것에 대해 매우 공격적이다.)

그렇다면 이미지 URL에 문제가있는 것 같습니다. 브라우저에서 직접 http://<your server>/Images/tape_measure_unit.png을 가리키고 이미지가 다시 나타나는지 확인해 보셨습니까?