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中不起作用。在所有浏览器中，它都会显示手形光标而不是自定义光标。

Edit2：要跟进：我如何才能让这个在我的网站上运行，因为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;
 }

Answer 3

我建议你阅读这篇短文。 http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

IE错误有3种解决方法 - IE不会将自定义游标URL解释为相对。其他类型的URL在IE中正确解释

使用绝对路径
在标签之间的html页面中移动游标样式
使用IE条件注释，类似于John C提供的解决方案。

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

3 个答案: