조직 용으로 이미지가있는 다른 디렉토리에있는 CSS 파일이 있습니다. 문제는 항상 배경 이미지를 모두 다음과 같이 설정하는 것입니다. background-image: url(../img/Untitled.jpg). HTML의 <base> 태그는 CSS에 사용할 수 있으므로 모든 내용에 "../img/"을 넣지 않아도됩니다. background-image?CSS에서 사용되는 이미지의 기본 디렉토리를 설정하는 방법이 있습니까?
다른 가능 옵션은 php 또는 다른 서버 측 언어를 사용하여 css 스타일을 만드는 것입니다. 그런 다음 디렉토리 변수를 사용하여 각 항목의 전체 경로를 검색 할 수 있습니다.
styles.php
<?php
header("Content-Type: text/css");
$imageDir='../images';
// or
// $imageDir='/newsletter/2010/jan/17/business/category/7/img';
?>
.divClass{
background : url('<?php echo $imageDir; ?>/kitten.jpg');
}
아니요, 나는 그 구문을 고집합니다.
편집 : http://lesscss.org/을 확인하시기 바랍니다. 변수를 사용하면 맨 위에있는 모든 URL을 정의 할 수 있습니다.
CSS가 이미지와 동일한 디렉토리에 있지 않으면 실제로 해결책이 없습니다.
하지만 당신은 그렇지 않다 질문에 말을, 그래서 이미지가 각 background-image 또는합니다 (http://...으로) 고정 된 이미지를
한 가지에 대한 상대적 위치를 줄입니다 어디에있는 유일한 방법은 보여로 당신은 상대 경로를 반복적으로 사용하지 않고 할 수 있습니다. 항상 도메인 루트에서 내려올 수 있습니다. 이 URL은 url(/img/Untitled.jpg)처럼 보이며 도메인 밑에 얼마나 깊이 중첩되어 있는지에 관계없이 모든 CSS 파일에서 동일합니다.
이것은 루트를 시작점으로 사용하는 것이 더 쉽다고 가정합니다. '../ img/test.jpg'의 절대 경로는'/ newsletter/2010/jan/17/business/category/7/img/test.jpg'와 같을 수 있습니다 – Dutchie432
@ Dutchie432 - 아, 그래요. 이제 내가 묻지 않은 질문에 대답하고있다 :) – cdeszaq
URL 재 작성은 여기에 당신의 친구입니다.
CSS 이미지 참조는 항상 CSS 파일의 URL을 기준으로합니다. CSS 파일이 /css 안에 있고 이미지 리소스가 /img 안에 있고, 모든 이미지 참조 앞에 ../img/을 넣어야한다는 것에 지쳤다 고 가정 해 봅시다.
모든 상대 CSS 이미지 참조는 참조가 포함 된 CSS 파일의 URL을 기준으로 상대적인 값입니다.
/img/foobar.png/img/blue-theme/header-background.png : 그래서 그들은 원하는 위치 (/img)를 기준으로이
/css/foobar.png/css/blue-theme/header-background.png같은 URL을 다시 작성하는 URL 재 작성 규칙을 설정합니다
et voila! 문제 해결됨.
Apache의 mod_rewrite에서 이와 같은 작업을 수행 할 수 있습니다. 적절한 .htaccess에 다음을 추가하는 것만 큼 간단해야합니다.
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^css/(([^/]+/)*)([^/\.]+\.(gif|jpg|jpeg|png))$ img/$1$3
IIS에서 더 어려워도 개념은 동일하게 유지됩니다.
이런 종류의 질문은 제 답변과 함께 진행됩니다. OP가 CSS를 생성 할 수있는 서버 측 언어 (예 : PHP)를 사용하는 경우 포함 된 라이브러리를 줄이는 것이 바람직하다고 생각합니다. 그렇지 않다면, 이것은 첫 번째 선택이 될 것입니다! +1 – Dutchie432
답변 해 주셔서 감사합니다. 이미 사용하고있는 라이브러리의 수가 많기 때문에 지금은 사용하지 않을 것입니다.하지만 그 라이브러리는 훌륭한 라이브러리이므로 안전하게 보관할 것입니다. –