[css] CSS background-image-올바른 사용법은 무엇입니까?

Program / 글쓴이

CSS background-image 속성의 올바른 사용법은 무엇입니까? 내가 이해하려고하는 핵심은

  1. 따옴표로 묶어야합니까? background-image: url('images/slides/background.jpg');
  2. 상대 경로이거나 (위와 같이) 전체 URL이어야합니까?
  3. 표준 준수 브라우저에서 올바르게 작동하는지 확인해야 할 다른 사항.

답변

경로는 전체 또는 상대 경로 일 수 있습니다 (물론 이미지가 다른 도메인에서 온 경우에는 전체이어야합니다).

URI에 따옴표를 사용할 필요는 없습니다. 구문은 다음 중 하나 일 수 있습니다.

background-image: url(image.jpg);

또는

background-image: url("image.jpg");

그러나 W3 부터 :

괄호, 공백 문자, 작은 따옴표 ( ‘) 및 큰 따옴표 ( “)와 같이 따옴표없는 URI에 나타나는 일부 문자는 결과 URI 값이 URI 토큰이되도록 백 슬래시로 이스케이프해야합니다.’\ ( ‘, ‘\)’.

따라서 이러한 경우에는 따옴표 나 큰 따옴표를 사용하거나 문자를 이스케이프해야합니다.

답변

  1. 아니요 따옴표가 필요하지 않습니다.

  2. 그래 넌 할수있어. 그러나 상대 URL은 스타일 시트의 URL에서 확인됩니다.

  3. 따옴표를 사용하지 않는 것이 좋습니다. 이해하지 못하는 고객이 있다고 생각합니다.

답변

1) 따옴표를 넣는 것은 좋은 습관입니다

2) 예를 들어 상대 경로 일 수 있습니다.

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

CSS 가로 드 된 폴더에서 이미지 폴더를 찾습니다. 따라서 이미지가 다른 폴더에 있거나 CSS 폴더 트리에 없으면 절대 경로 또는 루트 경로를 기준으로 /를 사용하여 절대 경로를 사용해야합니다

3) 다음과 같은 표준 호환 브라우저에서 일관되게 작동하도록 백그라운드 이미지에 대한 완전한 선언을 사용해야합니다.

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

답변

상대 경로는 괜찮으며 따옴표는 필요하지 않습니다. 도움이 될 수있는 또 다른 방법 background은 이미지가로드되지 않거나 어떤 이유로 사용할 수없는 경우 “shorthand” 속성을 사용하여 배경색을 지정하는 것입니다.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

또한 이미지 반복 여부와 방향 (지정하지 않은 경우 기본값은 가로 및 세로 반복)과 컨테이너를 기준으로 이미지의 위치를 ​​지정할 수 있습니다.

답변

이미지가 CSS 파일의 별도 디렉토리에 있고 상대 경로가 웹 사이트의 루트에서 시작하려는 경우 :

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

답변

정확히 이미지가있는 디렉토리 구조를 확인하십시오 .CSS 폴더 외부에 이미지 폴더가 있고 CSS 폴더 외부에 이미지 폴더가 있다고 가정하면 “../images/image.jpg”를 사용해야합니다. 디렉토리 구조.

답변

사용이 CSS 파일의 이미지를 사용한다고 말하면 따옴표가 필요하지 않습니다. 

{background-image: url(your image.png/jpg etc);}