顯示具有 css 標籤的文章。 顯示所有文章
顯示具有 css 標籤的文章。 顯示所有文章

2014年2月19日 星期三

Rails 在CSS裡使用圖片

暴力法

反正最後都會被編譯在public下面,可以下rake assets:precompile指令,看看最後圖片被放到哪裡去了,通常都在public/asset底下,而網頁伺服器的根目錄是public/所以你的css就直接把圖片定位在/assets/底下,例如:

.your_class {
    background-image:url('/assets/your_img.png');
}

非常不建議用這個方法,程式碼非常不靈活

內嵌Ruby法

在Rails裡面,你的檔案想要內嵌Ruby,只要把檔名結尾加上.erb,就可以最常見的就是page.html.erb,但可沒這麼簡單唷,就連CSS檔以可以內嵌Ruby,一樣把你的CSS加上.erb,譬如style.css.erb,這樣CSS內就可以使用Ruby了。

既然可以使用Ruby了,那就大膽的把Rails內建的Helper拿出來用吧,asset_path("img.jpg"),就行了,例如:

.your_class {
    background-image:url('<%= asset_path("your_img.png") %>');
}

這樣至少靈活多了,至少你不用擔心Rails編譯之後,會把你的圖檔放到Public的哪裡去,被改了什麼檔名。

SCSS法

Rails預設使用SCSS,你打開你的Gemfile就可以看到了,預設已經有gem 'sass-rails',在Rails的CSS裡面取圖,我推薦這個方法,因為這個方法程式碼最簡潔:

.your_class {
    background-image: image-url("your_img.jpg");
}

發生什麼事?沒錯使用SCSS的話,image-url("your_img.jpg");就行了,image-url是Rails的Helper,可別跟CSS原生的background-image:url(your_img.jpg);給搞混囉

.your_class {
    /* 這個是Rails的Helper */
    background-image: image-url("your_img.jpg"); 

    /* 這個是CSS的原生寫法 */
    background-image: url(your_img.jpg);
}

這兩種寫法要到的圖片可不一樣唷,Rails的Helper編譯後,會自動幫你安排圖片的路徑。而CSS原生的寫法,你就得自己編譯過後,自己去public/asset裡面找,你的圖跑到哪去了。