ruby -- 进阶学习(十四)设置background-image(解决无法获取图片路径问题)
基于rails4.0环境
为了美化界面,添加背景图片,于是又傻逼了一回~~
一开始在xxx.html.erb中添加:(注:图片的路径为:app/asssets/images/background.jpg)
<style>
……
html {
background-color: #447d9a;
background-image: url(background.jpg) ;
background-repeat: repeat-x;
background-position: 100% 50%;
background-size: cover;
background-attachment: fixed;
}
……
</style>
然后报错:
No route matches [GET] "/background.jpg"
在页面加入测试语句:
<img src="background.jpg">
发现图片能够显示。。。
然后搜索了很多网页,都说会不会是图片路径错误。
于是,把可能的路径都添加了这张图,依然不行~~
苦逼了好久~~
然后尝试用 asset-url,还是不行
然后,去看文档:http://edgeguides.rubyonrails.org/asset_pipeline.html,得到启发
在layout/application.html.erb中添加下面代码:
<%= image_tag "background.jpg" %>
然后背景图片路径配置还是照那样写,如下
background-image: url(background.jpg) ;
结果,图片能够显示了。。。
ruby -- 进阶学习(十四)设置background-image(解决无法获取图片路径问题)的更多相关文章
- ruby -- 进阶学习(四)paperclip上传中文命名图片
Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...
- Java进阶(三十四)Integer与int的种种比较你知道多少?
Java进阶(三十四)Integer与int的种种比较你知道多少? 前言 如果面试官问Integer与int的区别:估计大多数人只会说到两点:Ingeter是int的包装类,注意是一个类:int的初值 ...
- Python爬虫学习:四、headers和data的获取
之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...
- 大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则
第十四节过拟合解决手段L1和L2正则 第十三节中, ...
- 强化学习(十四) Actor-Critic
在强化学习(十三) 策略梯度(Policy Gradient)中,我们讲到了基于策略(Policy Based)的强化学习方法的基本思路,并讨论了蒙特卡罗策略梯度reinforce算法.但是由于该算法 ...
- Scala学习十四——模式匹配和样例类
一.本章要点 match表达式是更好的switch,不会有意外调入下一个分支 如果没有模式能够匹配,会抛出MatchError,可以用case _模式避免 模式可以包含一个随意定义的条件,称做守卫 你 ...
- 前端基础进阶(十四):es6常用基础合集
在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高兴的是,如果你熟悉 ...
- ruby -- 进阶学习(十)自定义路由中:new, :collection和:member的区别
学习链接:http://rubyer.me/blog/583/ RESTful风格的路由动词默认有7个(分别为:index, show, create, new, edit, update, dest ...
- ruby -- 进阶学习(十二)fragment cache
基于rails4.0环境 Rails 页面缓存的方法很多,最近弱弱地尝试了fragment cache,用法还算简单~@_@|| 首先,查看config/environment/production. ...
随机推荐
- Leetcode 7 Reverse Integer 数论
题意:将整数倒置,该题简单但是需要注意数据的范围,难得的好题. 如果出现1000000003或者-2000000003,倒置后的数超过int的范围,因此返回0,出现这种情况可以使用long long, ...
- listview可见再加载图片
对于,listView如果同时含有大量文字和图片,那么对于用户,如果不需要滑动到后面,那么此时去加载网络图片,显然是耗费流量的. 此时可以做一些优化: listView.getRefreshableV ...
- Unity3D编程学习分享
学习地址:http://www.ixueyun.com/lessons/detail-lessonId-692.html 一.课程概述: 以前大部分3D游戏出现在pc和ps.XBox等专业游戏主机上, ...
- Objective-c中 isEqual ,isEqualToString , == 三者的区别
首先 OC中的对象都是用指针表示,方法的调用是基于消息机制实现,== 比较的自然是指针指向的地址 然后 说下 isEqual 和 isEqualToString 的区别 IsEqual 是 NSObj ...
- 如何实现LBS轨迹回放功能?含多平台实现代码
本篇文章告诉您,如何实现轨迹回放.并且提供了web端,iOS端,Android端3个平台的轨迹回放代码.拷贝后可以直接使用.另外,文末有小彩蛋,算是开发者的福利. Web端/JavaScript 实现 ...
- 用DOS批处理实现FTP自动上传、下载、清理文件
用DOS批处理实现FTP自动上传.下载.清理文件 最近好像特别的忙,好久没来写点东西了,今天写了一个利用批处理程序完成FTP自动上传.下载.清理文件的程序.赶紧 记录下来,以备日后之用.功能介绍:自动 ...
- maven nexus-staging-maven-plugin exception-connect timed out
不知道是国内的网络的问题还是别的原因,在deploy一个maven的artifact到oss server的时候总是报错: Failed to execute goal org.sonatype.pl ...
- Page和UserControl的事件加载顺序
UC OnInitPage OnInit Page Page_LoadPage OnLoad UC Page_LoadUC OnLoad Page OnPreRenderUC OnPreRender
- 八卦一下黄晓明和Angelababy的电话号码
最新一期20150605的<奔跑吧兄弟>真是太搞笑了,邓超被大家整的... 但这一期有个细节引起了我的注意,就是Angelababy在现场打电话给黄晓明,而拨键声音十分清晰.一些拥有“绝对 ...
- C#, Java, PHP, Python和Javascript几种语言的AES加密解密实现[转载]
原文:http://outofmemory.cn/code-snippet/35524/AES-with-javascript-java-csharp-python-or-php c#里面的AES加密 ...