CSS引入外部图片不显示

html-css011

CSS引入外部图片不显示,第1张

先说解决办法:

将你的icon1, icon2, icon3 …等等class样式再添加这几条属性:{display: inline-blockwidth:图片宽度height:图片高度}

你是要以背景的形式显示图片,那么你这样写,你可以在浏览器查看元素,图片并不占空间,你需要给背景图片指定大小位置。

解析:前面的url是自定义鼠标图标的路径,可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性(如pointer/crosshair/default/等)

注意:w3school推荐第二个参数必须定义一个普通的光标,以防止url定义的光标有备用选项。另外,IE下第二个参数可以省略。

自定义鼠标图标,需要注意以下几点:

① 图标的格式

IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此一般将url引用的图标存为ico或cur格式比较好。

② 图标的大小

鼠标图标的尺寸推荐32*32,否则可能出现大小不一致问题。

参考文章: 使用自定义的鼠标图标

首先要了解 html标准中可以使用一些转义字符来表示字符。包括直接使用字符编码。

其次font icon就是定制一些特殊字体 当使用该字体时,显示的是图案。

其实之前windows里的windings字符已经做到了,只是现在做到网页里了。\0003其实就是表示一个字符,然后浏览器会到字体文件里去找。你可以在chrome浏览器里直接改这个值,比如改成\e0005看看效果。

IcoMoon App - Icon Font Gen这个在线的制作工具,可以让你了解更多。