css - 如何“重复-x” Compass生成的 Sprite

Question

我在Rails 3.1应用程序的gradient中有一个assets/images目录。这是我使用Compass从这些图像创建精灵的代码：

 $gradient-repeat: repeat-x;
 @import "compass";
 @import "gradient/*.png";
 body > header > nav {
   clear: both;
   @include gradient-sprite(red-menu);
 }

我的问题是，即使我明确告诉Compass我希望水平重复背景，它仍然会产生以下CSS：

 body > header > nav {
   clear: both;
   background-position: 0 -207px;
   height: 34px;
 }
 .gradient-sprite, body > header > nav {
   background: url(/assets/gradient-sbe06665f77.png) no-repeat;
 }

因此，我的渐变不会在水平方向重复出现。

我在Gemfile中使用了Compass gem的3.1分支。

现在，我可以简单地在代码中添加 background-repeat: repeat-x;并覆盖Compass为我生成的内容，但是我觉得这不是Rails的处理方式。

任何帮助将不胜感激。

Answer 1

默认情况下是不可能的，但是我在本文中找到了一种巧妙的技术，它解释了如何重复精灵。

Background repeat and css sprites

希望能帮助到你