로컬 환경에서 CSS를 통해 이미지를 표시하려면 어떻게합니까?

Question

이것은 매우 당황 스럽습니다. 나는 새로운 것을 배우고 있지만, 나는 혼자 알아낼 수 없다는 것에 놀랐습니다.

내 데스크톱에는 Test라는 폴더가 있고 index.html이라는 폴더와 index.css이라는 이미지가 포함 된 CSS라는 폴더가 있고 logo.png이라는 이미지가있는 폴더가 있습니다. 내가 로컬 이미지를 표시 할 수 없습니다 위의 줄을 사용

background: url("images/logo.png") no-repeat; 

: 내 index.css 파일에서

, 나는 다음 줄을 가지고있다. /images 및 test/images을 사용해 보았지만 작동하지 않습니다. 로컬로 보는 경우 어떻게 표시 할 수 있습니까?

Answer 1

앞서 말씀 드린대로 루트 폴더 Test에는 CSS와 이미지 용 폴더가 다릅니다. 당신이 당신의 CSS 파일에 background에 대한 코드를 작성하기 때문에 :

사례 1 :

background:url("logo.png"); 

는 CSS 폴더 안에 이미지를 검색합니다.

---

Case2는 :

background:url("images/logo.png"); 

CSS 폴더 안에 첫번째 images 폴더를 검색하고 그 images 폴더 안에 logo.png를 검색합니다. CSS 폴더에는 이미지 폴더가 없습니다.

---

Case3 :.이 경우

background: url("../images/logo.png") no-repeat; 

가 .. 다시 메인 디렉토리에 당신을 데려 갈 것이다 (즉 css 폴더에서 루트 forder Test에 그런 /images는 images 내부에 당신을 데려 갈 것이다 폴더로 이동하면 이미지에 대한 경로로 /logo.png가 표시됩니다.)

Answer 2

시도해보십시오.

background-image: url("images/logo.png") no-repeat; 

Answer 3

기본적으로 논리적으로 생각해야합니다. CSS 파일이 폴더 내에 있으면 파일의 모든 링크가 폴더에서 검색됩니다. 사이트의 루트에/IMG라는 폴더에있는 이미지에 연결하려면, 당신은 클래스의 이름을

../img/pic.extension 

Answer 4

변경 IMG를 사용하여 레벨을 이동해야합니다. 배경 또는 배경 이미지 대신 내용을 사용하고 너비를 설정하십시오.

img { 
    content: url("../img/Wizard-of-os-black.png"); 
    width: 90px; 
}