我让这个网站在 ruby on rails 之外工作，然后我将以下代码移到 rails 上，当我将鼠标放在悬停图像上时，它会使悬停图像变黑。
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
html {
height: 80%;
width:90%
}
p {font-size:25px;
font-family: Helvetica,Arial,sans-serif;
}
body
{
background-image:url('Loons-bkg.jpg');
width: 100%;
padding:0;
height: 100%;
}
#logo{
width: 100%;
height: 190px;
background:url('Loons-Title.png');
background-position:center top ;
background-size:contain;
background-repeat:no-repeat;
}
div.wrapper{
position:relative;
width: 80%;
height: 100%;
margin-left: 10% ;
}
#blog{
position:absolute;
border-style:solid;
border-width:2px;
width:60%;
padding: 30px;
min-height:92% ;
background: rgb(255, 250, 250); /* Fall-back for browsers that don't support rgba */
background: rgba(255, 250, 250, .5);
left:20%;
}
#navbar {
height: 65px;
width: 700px;
list-style:none;
padding: 0;
margin:0 auto;
overflow: hidden;
}
#navbar li {
float: left;
background-image: url(image_path('Loons-menu-sprite.png'));
}
#navbar a {
display: block;
padding-top: 66px;
text-decoration: none;
}
#nav-bio { width: 79px;
}
#nav-bio:hover {
width: 79px;
background-position: 0px -66px;
}
#nav-music { width: 137px;
background-position: -79px 0px;}
#nav-music:hover {
width: 137px;
background-position: -79px -66px;
}
#nav-video {
width: 121px;
background-position: -216px 0px;
}
#nav-video:hover {
width: 121px;
background-position: -216px -66px;
}
#nav-press {
width: 140px;
background-position: -337px 0px;
}
#nav-press:hover {
width: 140px;
background-position: -337px -66px;
}
#nav-shows {
width: 129px;
background-position: -477px 0px;
}
#nav-shows:hover {
width: 129px;
background-position: -477px -66px;
}
#nav-shop {
width: 94px;
background-position: -606px 0px;
}
#nav-shop:hover {
width: 94px;
background-position: -606px -66px;
}
#social-media {
position:absolute;
height: 97px;
width: 700px;
list-style:none;
padding: 0;
margin:0 auto;
overflow: hidden;
}
#social-media li {
float: left;
background-image: url(Social-Media-Sprite.png);
}
#social-media a{
display: block;
padding-top: 70px;
text-decoration: none;
text-indent:-9999px;
}
#facebook { width: 103px;}
#facebook:hover {
width: 103px;
background-position: 0px -90px;}
#bandcamp {
width: 114px;
background-position: -103px 0px;}
#bandcamp:hover {
width: 114px;
background-position: -108px -90px;
}
#rc {
width: 103px;
background-position: -217px 0px;}
#rc:hover {
width: 103px;
background-position: -217px -90px;
}
#social{
position:absolute;
bottom: 12%;
right: 12%;
}
这是应用程序 View
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Loons</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div id = 'logo'></div>
<ul id="navbar">
<li id="nav-bio"><a href="#">Bio</a></li>
<li id="nav-music"><a href="#">Music</a></li>
<li id="nav-video"><a href="#">Video</a></li>
<li id="nav-press"><a href="#">Press</a></li>
<li id="nav-shows"><a href="#">Shows</a></li>
<li id="nav-shop"><a href="#">Shop</a></li>
</ul>
<div class = 'wrapper'>
<div id = 'blog'>
<%= yield %>
<iframe width="600" height="500" src="http://www.youtube.com/embed/MQ24QnrPKwo" frameborder="0" allowfullscreen></iframe>
</div>
<div id ="social">
<ul id="social-media">
<li id="facebook"><a href="https://www.facebook.com/pages/Loons/157520584337783?v=info">b</a></li>
<li id="bandcamp"><a href="http://loonsmusic.bandcamp.com/">b</a></li>
<li id="rc"><a href="#">b</a></li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
如果您使用了 rails scaffold --no-stylesheets，您将避免在将来删除 scaffold.css。
关于html - CSS 和 HTML 过渡到 RoR 使 Sprite 变成黑盒子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10660622/