指南针精灵没有在浏览器中显示

时间:2013-02-09 06:43:31

标签: sass compass-sass sprite zurb-foundation

我正在使用基于Sass构建的Zurb Foundation 3,我已经设法导入精灵和图像文件夹,显示所有生成的精灵,但没有一个出现在浏览器中。

HTML

<div class="six columns">
    <a href="#"><h2>Al Umrah</h2></a>
</div>

SCSS

$siteImages-layout:smart;
@import "siteImages/*.png";
@include all-siteImages-sprites;


h2{@include siteImages-sprite(al-umrah-logo);height:261px;}

GENERATED CSS

.siteImg-sprite, .siteImg-al-umrah-logo, .siteImg-hajj, .siteImg-home, .siteImg-umrah,     h2 {
background:url('/images/siteImg-sf72f1f5d54.png') no-repeat
}
.siteImg-al-umrah-logo {
background-position:0 -384px
}
.siteImg-hajj {
background-position:0 -128px
}
.siteImg-home {
background-position:0 -256px
}
.siteImg-umrah {
background-position:0 0
}
h2 {
background-position:0 -384px;
height:261px
}

RB CONFIG

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# relative_assets = true

PS:我在桌面上有这个文件夹

1 个答案:

答案 0 :(得分:1)

CSS文档正在请求测试计算机上不存在的文件。由于您是从桌面查看文档,因此图片的绝对路径可能类似于C:\Users\username\desktop\path\to\images\siteImg-sf72f1f5d54.png,而不是/images/siteImg-sf72f1f5d54.png

启用relative_assets应将路径更改为../images/siteImg-sf72f1f5d54.png,这对您的测试计算机和生产服务器都有效。