2011-03-22 3 views
2

모두Sproutcore 앱에서 CSS를 사용하여 이미지를 참조하려면 어떻게해야합니까?

간단한 질문 : 내 응용 프로그램의 배경으로 이미지 "logo.png"를 포함하고 싶습니다. 파일을 어디에 두어야하며 main_page.js와 함께 resources 폴더에있는 CSS 파일에서 파일을 참조해야합니까?

나는 CSS 클래스라는 문서-배경이 : 여기

이야기의 나머지 부분입니다. CSS 파일에서 배경색을 다음과 같이 설정하면이 클래스가 작동하는 것을 알 수 있습니다 : .doc-background { background-color: red} 원하는 효과가 있으며 방화 광이 보여주는 클래스 doc-background가 사용되었음을 나타냅니다.

그러나 .doc-background { background-image: url('logo.png'); }과 같은 행을 추가해도 아무런 효과가 없습니다. Firebug는 doc-background 클래스가 적용되지 않았 음을 보여줍니다. Firebug에서 스타일을 수정하여 배경 이미지에 대한 라인을 추가하면 툴팁에 "URL을로드하지 못했습니다."라고 표시됩니다.

누군가 자원 및 이미지 작업 방법에 대한 가이드와 CSS를 사용하고 싶다면 어디에 올려 놓을 수 있습니까? 성공적으로 이미지 뷰를 사용하여 HTML로 코딩했습니다. 여기

은 이미 시도 것입니다 :

  • 정전기 URL을 사용하는 대신
  • 이미지에 이미지 파일을 이동
  • 경로에 모든 변형을 사용하여 이미지에 참조 된 자원
  • 에서 폴더 - 이미지를 포함하여 이미지를 포함한 리소스/이미지 포함 ...
  • 답변을 검색하는 중 많은 사람들이 자신의 앱 튜토리얼 등을 직접 작성합니다.

궁극적 인 CSS의 색상과 이미지를 사용하는 예제 응용 프로그램이 있다면! 하지만 background-image CSS 속성에 대한 위치 및 일부 도움이 시작됩니다.

덕분에 많이, 당신의 CSS에

마주

+0

이미지가 파일과 동일한 디렉토리에 있는지 확인하십시오. –

+2

static-url 대신 'absolute'경로를 사용하셨습니까? 나는 디버깅 목적으로 시도 할 것이다. 예 : 이미지가 루트 폴더의 '이미지'라는 폴더에 있습니다. 배경 스타일은 이미지의 정확한 URL'background : url ('http://www.yoursite.com/images/image.jpg') 왼쪽 상단에 있습니다.'이미지를 폴더에서 가져 오려고 시도했을 수 있습니다. 경로가 호출되는 위치에서 일치하지 않습니다. – ckaufman

답변

4

장소 이미지 어딘가에 상대 :

자원 /있는 style.css
자원/이미지/logo.png

그런 static_url를 사용 이미지를 참조하십시오 :

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