背景图片路径在Sass和指南针 [英] Background images path in Sass and Compass

问题描述

这是在config.rb文件中提及的

  images_dir =images
  
 
 
 
我对图片文件夹中的项目中的图片使用了2个文件夹
 图片
图片/背景/ 
图片/内容/ 
  
 如果任何图像在 images / background / 文件夹内，那么我应该如何添加图像的路径css  background  and Sass variables？ 
  $ header-img：sass.gif 
  
和
  background-image：url（'sass.gif？1327592426'）; 
  
 如何摆脱这个自动生成的？1327592426  
 
解决方案
您应该使用 image-url   URL助手。它在您的 config.rb 中定义的生成相对于项目的图像目录找到的资产的路径。您还可以将第三个参数 $ cache-buster 设置为false以删除生成的？1327592426  
 
 
 
 Sass：
  // image-url参数：
 // $ path：config.rb中相对于images目录的路径
 // $ path-only：如果为true，只会返回路径，而不是`url（）`function 
 // $ cache -buster：当设置为`false'时，不会使用缓存清除器（即`？313420982`）
 $ header-img：image-url（'background / sass.gif'，false，false）
 background-image：$ header-img 
  
生成的CSS：
  background-image：url（'images / background / sass.gif'）
  
 
This is mentioned in config.rb file
images_dir = "images"
I use 2 folder for images in my projects inside images folder
images
images/background/
images/content/
If any images is inside images/background/ folder then how i should add the path for image in css background and  Sass variables?
$header-img: "sass.gif"; 
and
background-image: url('sass.gif?1327592426');
And how to get rid of this auto generated ?1327592426 from each background image?
解决方案
You should use the image-url URL helper. It "generates a path to an asset found relative to the project's images directory" which you defined in your config.rb. You can also set the third parameter $cache-buster to false to remove the generated ?1327592426

Sass:
// image-url arguments:
// $path: path relative to images directory in config.rb
// $path-only: if true, will cause only the path to be returned instead of a `url()` function
// $cache-buster: When set to `false` no cache buster will be used (i.e. `?313420982`)
$header-img: image-url('background/sass.gif', false, false)
background-image: $header-img
Generated CSS:
background-image: url('images/background/sass.gif')


                        
这篇关于背景图片路径在Sass和指南针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！