0

我为我的网站设置了一个光标，并使用了一个 .ico 文件。虽然，它根本没有显示。

这是CSS：

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
  }

有谁知道？谢谢。

4

1 回答 1

2

网址可能有问题。要测试这个而不是使用defaultusecrosshair并查看光标是否更改，样式也可能不会缓存在浏览器中，因此在大多数浏览器 Ctrl+F5 应该重新加载没有缓存的页面。

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), crosshair;
}

如果将光标更改为a，crosshair那么问题出在您的网址上，您可以诊断网址，也可以对光标图像进行base64编码，这将为您带来两个优势。

  1. 您不必担心移动文件或维护链接
  2. 如果您部署到新环境，则无需担心光标图像或它们的存储位置。

但这有一个缺点，那就是它会使您的 css 文件更大，但是由于通常光标图像很小，这应该不是什么大问题。

如何对图像进行 base64 编码，您可以在谷歌搜索“base64 编码图像”，其中最重要的结果是base64-image.de这是我过去使用过的网站。然后css看起来像这样

html, body {
    cursor: url("data:image/gif;base64,R0lGODdhBQAFAPABAP////8AACwAAAAABQAFAAACCARihhe9q0wBADs=="), crosshair;
  }

现在如果更改default为crosshair仍然没有做任何事情怎么办？那么有两种可能

  1. 由于您没有发布任何 html 代码，因此您的浏览器可能没有呈现任何内容。html 和 body 只会和内容一样大，所以没有内容意味着 0 大小的 html 和 body。
    html {
        height: 100%;
        width: 100%;
    }
  1. 如果您在 html 上有内容并且光标不起作用，那么光标可能没有应用于页面上的所有元素，因此您可以像这样修改光标的 css，这会将其应用于所有元素在身体上
    html, body, body * {
        cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
    }
于 2020-10-04T01:22:16.680 回答