我正在使用基于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:我在桌面上有这个文件夹
答案 0 :(得分:1)
CSS文档正在请求测试计算机上不存在的文件。由于您是从桌面查看文档,因此图片的绝对路径可能类似于C:\Users\username\desktop\path\to\images\siteImg-sf72f1f5d54.png
,而不是/images/siteImg-sf72f1f5d54.png
。
启用relative_assets
应将路径更改为../images/siteImg-sf72f1f5d54.png
,这对您的测试计算机和生产服务器都有效。