9

我知道路径应该是相对于 css 文件的，但对于我试图用作光标的图像来说似乎并非如此。

文件结构为：

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

网站.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，或者我应该将光标的副本放在与每个页面相同的级别（这很糟糕！）？

4

3 回答 3

14

您应该使用 .cur 扩展名使其在 IE 和 FF 中都可以工作。在 IE11 及更早版本中，光标文件的 URL 是相对于页面而不是 css 文件的。

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

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

于 2012-10-05T22:39:28.340 回答
6

我只知道 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;
 }
于 2012-09-17T07:37:23.487 回答
1

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

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

  1. 使用绝对路径
  2. 在标签之间移动 html 页面中的光标样式
  3. 使用 IE 条件注释，类似于 John C.
于 2013-03-16T11:02:17.340 回答