关于美观【.ico图标】——网站图标、鼠标样式图片自定义


网站图标添加

html head添加:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

注:位置为绝对位置,根据文件位置决定


鼠标样式自定义

1.基础指针设置为图片

将png文件转换为适合文件进行加载, 在网上找到的比较好用的转换平台:http://cn.faviconico.org/

注意:尺寸为 32*32、48*48、64*64。 ( 推荐 32*32 )

html,
body {
    user-select: none;  // 强制禁止选取文字(可不写、与本文无关)
    cursor: url('../images/icon1.ico'),auto; //位置为绝对位置(图片格式为.ico、.ani、.cur)
}
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;

首先尝试加载foo.cur。如果该文件不存在或由于其他原因无效,在尝试 bar.gif,如果也不能用的话, auto 会被使用。

链接到区段与其他浏览器的兼容性

  • IE只支持CUR和ANI格式。
  • IE不支持x和y坐标的CSS 3语法.光标图像和属性的其余部分将被忽略。
浏览器 最低版本 格式(例如) x-y坐标
Internet资源管理器 6.0 .cur/.ani
Firefox(Gecko)、Windows和Linux 1.5 (1.8) .cur / .png / .gif / .jpg 1.5 (1.8)
Firefox(Gecko) 4.0 (2.0) .cur / .png / .gif / .jpg /.svg (壁虎2.0)
Opera
Safari(Webkit) 3.0 (522-523) .cur/.png / .gif / .jpg 3.0 (522-523)

参考文档

2.内置指针样式

描述
url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

猜你喜欢

转载自blog.csdn.net/qq_34611721/article/details/81742808
今日推荐