Rails 在 rails 里 CSS 里定义背景图片的参数

匿名 · 2012年02月22日 · 最后由 jiemoon 回复于 2015年03月15日 · 13812 次阅读

在 rails 里 CSS 里定义背景图片的参数应该如何写?

例如 CSS 代码:

#body {
    background-image: url( XXXX)  //写相对路径
}

url 的参数应该如何写??相对路径写 /images/XXX.jpg 可以吗??

可以这样写:在文件后加上后缀.erb,然后用<%= image_path ... %>

css 就写 css 和资源的相对路径就可以了么

#1 楼 @sunzheng91 不需要用 .erb 的,sass, scss 都可以这么写

#2 楼 @huobazi css 中的路径以该 css 文件的路径为基准

匿名 #5 2012年02月23日

我已经查过书了,存放 CSS 文件的根目录为 publice 目录 url(XXX) XXX 为 /images/XXX.jpg

@s200612321 这个要看布署的时候是否会使用相对路径。建议使用<%= image_path ... %> 来处理。

初学,刚才也在找这个问题的答案,久远的回答下,☺

background: image-url("xxx.jpg"); 试了成功,so 下面引用的路径应该是 (rails 版本不同?): image-url("rails.png") # => url(/assets/ image /rails.png)


参见 [Ruby on Rails 實戰聖經](http://ihower.tw/rails3/assets-and-ajax.html


Sass 還提供了像是 -url 和 -path 這樣的 helper 來協助你,因此你也可以這樣使用:

  • image-url("rails.png") # => url(/assets/rails.png)
  • image-path("rails.png") # => "/assets/rails.png".
  • asset-url("rails.png", image) # => url(/assets/rails.png)
  • asset-path("rails.png", image) # => "/assets/rails.png" *** 如何處理圖片 放在 app/assets/images 下的圖片該怎麼使用呢?在實際佈署後,Rails 會將檔案名稱加以編碼,例如 rails.png 會變成 rails-bd9ad5a560b5a3a7be0808c5cd76a798.png。這麼做的原因是當圖片有變更的時候,編碼就會不同而有不同的檔名,這樣就可以避免瀏覽器快取到舊的檔案。也因為檔案名稱會變動,所以放在 app/assets/images 下的圖片,要用的時候就沒有辦法寫死檔名。在一般的 View 中,可以使用 image_tag 這個 Helper: <%= image_tag("rails.png") %> 如果在 CSS 裡的話,有兩種辦法:一是將檔案命名為 erb 結尾,例如 app/assets/stylesheets/main.css.erb,然後使用 asset_path 這個 Helper: h1 { background-image: url('<%= asset_path("rails.png") %>'); } 另一種方法是使用 Sass 或 SCSS 語法。其中 SCSS 相容於 CSS。例如命名為 app/assets/stylesheets/main.css.scss,然後使用 image-url 這個 Sass 提供的方法: h1 { background-image: image-url("rails.png") } 如果是 js 檔案中想要拿圖片的位置,就只能用 js.erb 的格式,然後內嵌 asset_path Helper 方法了。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号