programing

CSS에서 배경 이미지 경로를 제공하는 방법은 무엇입니까?

nicescript 2021. 1. 17. 10:34
반응형

CSS에서 배경 이미지 경로를 제공하는 방법은 무엇입니까?


내 CSS 파일은 다음 위치에 있습니다.

프로젝트 / 웹 / 지원 / 스타일 /file.css

내 이미지는 다음과 같습니다.

Project / Web / images / image.png

내 CSS 파일에이 이미지를 원합니다.

나는 시도했다 :

1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");

그러나. 내 페이지에이 이미지가 표시되지 않습니다.

css 파일에서 이미지 파일의 경로를 지정하는 올바른 방법은 무엇입니까?


귀하의 CSS는 여기에 있습니다 : Project / Web / Support / Styles / file.css

1 번은 ../프로젝트 / 웹 / 지원을 의미하고 2 번 ../ ie ../../는 프로젝트 / 웹을 의미합니다.

시험:

background-image: url('../../images/image.png');

두 가지 기본 방법이 있습니다.

url(../../images/image.png)

또는

url(/Web/images/image.png)

작업하기 쉽고 사이트의 모든 위치에서 작업하기 때문에 후자를 선호합니다 (인라인 이미지 경로에도 유용함).

나는 폴더를 너무 깊게 중첩하지 않을 것입니다. 당신이 발견했듯이 그것은 불필요 해 보이고 삶을 조금 어렵게 만듭니다.


아래를 사용하십시오.

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

작동합니다.


css 파일에서 2 개의 폴더를 다시 가져와야합니다.

시험:

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

솔루션 ( http://expressjs.com/en/starter/static-files.html ).

이 작업을 마치면 이미지 폴더에 더 이상 넣지 않습니다. 단지

background-image : url ( "/ image.png");

이미지가 이미 정적 파일에 있음을 나타내는 carpera

참조 URL : https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css

반응형