对CSS自定义光标使用外部图像 [英] Using external images for CSS custom cursors
本文介绍了对CSS自定义光标使用外部图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以为CSS自定义光标使用外部图像URL?以下示例无效:
< div class =test> TEST< / div>
CSS:
.test {
background:gray;
width:200px;
height:200px;
cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg');
}
小提琴:http://jsfiddle.net/wNKcU/4/
解决方案
这不是工作,因为你的图像太大 - 有图像尺寸的限制。例如,在Firefox中,大小限制为128x128像素。
此外,您还必须在 auto
中添加。
此处的jsFiddle演示 - note这是一个实际的图片,而不是默认光标。
.test {background:gray; width:200px; height:200px; cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif),auto;}
< div class =test> TEST< / div
Is it possible to use external image URLs for CSS custom cursors? The following example doesn't work:
HTML:
<div class="test">TEST</div>
CSS:
.test { background:gray; width:200px; height:200px; cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg'); }
Fiddle: http://jsfiddle.net/wNKcU/4/
解决方案It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px.
Additionally, you also have to add in
auto
.jsFiddle demo here - note that's an actual image, and not a default cursor.
.test { background:gray; width:200px; height:200px; cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto; }
<div class="test">TEST</div
这篇关于对CSS自定义光标使用外部图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文