[css] CSS URL에서 상대 / 절대 경로를 사용하는 방법은 무엇입니까?

Program / 글쓴이

프로덕션 및 개발 서버가 있습니다. 문제는 디렉토리 구조입니다.

개발:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

생산:

  • http://live.com/images/image.jpg
  • http://live.com/resources/css/style.css

어떻게이있을 수 있습니다 style.css에 css두 서버에 대한 동일한 경로에 그 사용 폴더 background: url재산? 상대 경로와 함께 사용할 수있는 트릭이 있습니까?

답변

URL은 CSS 파일의 위치에 상대적 이므로 다음과 같이 작동합니다.

url('../../images/image.jpg')

상대 URL은 두 개의 폴더를 뒤로 이동 한 다음 images폴더로 이동합니다. 구조가 동일하면 두 경우 모두 작동합니다.

에서 https://www.w3.org/TR/CSS1/#url :

부분 URL은 문서가 아닌 스타일 시트의 소스를 기준으로 해석됩니다.

답변

개인적으로 나는 .htaccess 파일에서 이것을 고칠 것입니다. 그것에 액세스 할 수 있어야합니다.

다음과 같이 CSS URL을 정의하십시오.

url(/image_dir/image.png);

.htacess 파일에 다음을 입력하십시오.

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

또는

RewriteRule ^image_dir/(.*) images/$1

사이트에 따라.

답변

나는 똑같은 문제가 있었다 … 내 CSS를 게시하고 싶을 때마다 .. 나는 검색 / 바꾸기를해야했다. 그리고 상대 경로가 개발마다 다르기 때문에 상대 경로가 나에게도 작동하지 않을 것이다.

마지막으로 검색 / 바꾸기에 지 쳤고 동적 CSS를 만들었습니다 (예 : www.mysite.com/css.php). 동일하지만 이제는 CSS에서 내 PHP 상수를 사용할 수 있습니다. 같은 somethig

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

이제 내 dev 서버에서 원래 형식을 잃지 않고 YUI 압축기를 사용하여 압축 할 수 있기 때문에 동적으로 만드는 것은 나쁜 생각이 아닙니다.

행운을 빕니다!

답변