CSS와 자바스크립트의 이미지 경로 차이점

오늘 코드를 입력할 때 아바타를 전환하는 함수를 작성하고 싶었는데 문제는 아바타가 전혀 나타나지 않는다는 것입니다. 갑자기 아이디어가 떠올랐습니다. CSS와 JavaScript에서 이미지 경로를 작성하는 방법이 다를 수 있을까요? ? ? 사용된 .css 파일과 .js 파일을 저장하기 위해 루트 디렉터리에 "style" 및 "script"라는 두 개의 추가 폴더가 생성됩니다.

index.html에

포함 pic ID로 태그의 이미지 배경을 설정하려면 CSS 파일에

이라고 쓰고, js 파일에는 경로를 Images/bg1.png로 씁니다.

<div id="pic">
<p>开心吗</p>
</div>

간단히 말하면,

(1) js 스크립트의 경우 html은 스크립트를 페이지에 로드하고 함께 구문 분석하는 것입니다(js 스크립트가 이 페이지에 직접 작성된 것과 같습니다)

#pic{ background:url(../images/bg1.png); }

(2) CSS 파일의 경우 링크만 제공하고 html 페이지에 로드하지는 않습니다. 예를 들어 이 예에서는 html이 링크에 따라 CSS 파일에서 필요한 이미지 파일을 찾습니다.

CSS의 이미지 파일 경로는 자신을 기준으로 하고, js의 이미지 파일 경로는 자신이 위치한 파일을 기준으로 합니다.