游标URL是否相对于css文件？

Question

我知道路径应该是相对于css文件的,但对于我试图用作游标的图像来说,情况似乎并非如此.

文件结构是:

Content/Site.css
Content/images/butteryfly.ani
Content/images/user.png

的site.css:

.butterfly
{       
cursor: url('images/butterfly.ani'), pointer;    
}

/*this works*/
.ui-icon-user
{
    background-image: url(images/user.png) !important;
    background-position: 0 0;
}

如果我将其更改为:

.butterfly
{       
cursor: url('Content/images/butterfly.ani'), pointer;    
}

为什么相对URL不适用于游标？

编辑:在Chrome,Firefox或IE9中不起作用.在所有浏览器中,它显示手形光标而不是自定义光标.

编辑2:要跟进:我如何实际在我的网站上工作,因为html页面位于不同的级别？有没有办法在css中以某种方式指定相对URL,或者我应该将光标的副本放在与每个页面相同的级别(这很糟糕!)？

Answer 1

您应该使用.cur扩展名使其在IE和FF中都能正常工作.在IE11和更早版本中,光标文件的URL是相对于不是css文件的页面.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default;

尽量避免使用两个url值,因为它会导致IE对服务器造成不必要的打击.相反,使用绝对URL,它可以在IE,FF和Chrome中正常工作.Opera将使用默认值.

Answer 2

我只知道Internet Explorer将相对URL解释为相对于HTML文档,但现代浏览器(Mozilla Firefox,Google Chrome)将相对URL解释为相对于".css".

/*
 The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS     file
*/

#example {
  cursor: url('arrow.cur'),            /* Modern browsers    */
          url('style/arrow.cur'),      /* Internet Explorer  */
          default;
 }