如何使用CSS爲Sproutcore應用程序引用圖像？

簡單的問題：我想包含一個圖像「logo.png」作爲我的應用程序的背景。我應該在哪裏放置文件，以及如何在CSS文件中將它與main_page.js一起引用到資源文件夾中？

這裏是故事的其餘部分：

我有一個CSS類名爲doc背景。我知道這個類的作品，因爲當我設置CSS文件中的背景顏色，如下所示： .doc-background { background-color: red}它具有所需的效果，並且Firebug顯示我正在使用類doc背景。

但是，當我添加一條線如 .doc-background { background-image: url('logo.png'); }時，沒有任何效果。 Firebug顯示類doc-background不適用。當我在Firebug中修改樣式來添加關於背景圖片的行時，它會在工具提示中顯示「無法加載URL」。

有人可以請我指導一下關於如何使用資源和圖像的指南，以及如果我想使用CSS，將它們放在哪裏？我已經成功地使用它們使用圖像視圖並將它們編碼到HTML中。

以下是我已經嘗試：

使用靜態的URL使用路徑上的所有變化引用的圖片資源
下，而不是
圖像文件移動到圖像文件夾 - 包括資源/圖像只包括圖像，不包括...
大量的谷歌搜索的答案，閱讀創建自己的應用程序教程等

如果您有一個示例應用程序，它使用CSS中的顏色和圖像，這將是最終的！但一個位置和一些幫助的background-image CSS屬性將讓我開始！

謝謝了，

可見

來源

2011-03-22 Vishakha Parvate

您確定圖像與文件位於相同的目錄中嗎？ – 2011-03-22 18:05:38

您是不是指「絕對」路徑而不是靜態url？我會嘗試用於調試目的。示例：您的圖像位於根文件夾中名爲「圖像」的文件夾中。背景樣式調用圖片'background：url（'http://www.yoursite.com/images/image.jpg'）左上角的確切網址;'它可能試圖從文件夾中獲取圖片路徑與它被調用的位置不匹配。 – ckaufman 2011-03-22 18:12:32

將您的圖像地方相對於你的CSS：

資源/ style.css中
資源/圖像/ logo.png

然後用static_url參照圖像：

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

來源

2011-03-23 17:35:30 Mitchless

如何使用CSS爲Sproutcore應用程序引用圖像？

回答

相關問題