Css 多个背景图像（渐变和精灵）

这与SASS的compass框架特别相关

我创建了一个精灵和一个渐变混音。是否有可能将两者结合在同一项目上，如果有，如何结合

@import "compass/css3";

@import "icon/*.png";
@include all-icon-sprites;

@mixin light-gradient {
    @include background-image(linear-gradient(top, $dark 20%, $light 100%));
    color: $dark;
    text-shadow: $light;
}

button {
    @include light-gradient;
    @include icon-sprite(search);
}

更新：

我想出了这个解决方案，有人能改进吗

@import "compass/css3";
@import "compass/utilities/sprites";

$icon: sprite-map("icon/*.png");

$light-gradient: linear-gradient(bottom, $shade-2 20%, $shade-3 100%);
$icon-search: sprite($icon, search) no-repeat;

button {
    @include background($light-gradient, $icon-search);
}

您可以使用

$-sprites

变量获取由精灵混合生成的精灵贴图，如下所示（基于原始示例）：

---

不一定要优雅得多（如果有的话），但是如果你选择走另一条路线的话

谢谢你！我发现只有当我给background（）图标，然后给gradient（与你的相反）时，它才会起作用，比如：@include background（$icon search，$light gradient）；

@import "compass/css3";

@import "icon/*.png";
@include all-icon-sprites;

button {
    @include background(linear-gradient(top, $dark 20%, $light 100%),
                        sprite($icon-sprites, search) no-repeat);
}