在用另一个图像替换时悬停光标时，防止图像闪烁 /CSS/
当我在加载页面后第一次在徽标上输入光标时，它开始快速闪烁一秒钟。
我想过使用精灵，但我不想安装标志作为背景图像 - 我已经有了一个。 这是我的代码 CSS:
我想过使用精灵，但我不想安装标志作为背景图像 - 我已经有了一个。 这是我的代码 CSS:
HTML
<head>
<style>
html {
background-image:url/'backgroundimage.jpg'/;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-filter: brightness/0.6/;
-moz-filter: brightness/0.6/;
-o-filter: brightness/0.6/;
-ms-filter: brightness/0.6/;
}
#logo {
position: fixed;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
#logo:hover
{
content: url/'logobeforehover.png'/;
}
</style>
</head>
<body>
<div id="logo">
<img src="logoafterhover.png"/>
</div>
</body>
没有找到相关结果
已邀请:
2 个回复
知食
赞同来自:
将有一些闪烁，因为用户的浏览器必须从服务器上传图像。 TCP & HTTP 有很多开销，最多
快的
, 你可以合理地期待 /即使是非常小的图像/, 是的 100-200 小姐。 经常发生什么明显。 事实上，时间往往较高。
可能的解决方案：
将图像放在页面上的某个位置，但不要显示它。 经常使用安装
, 但
http://blog.futtta.be/2012/12/ ... none/
; 或者，您可以添加图像
&
的
和
的
. IMHO 这并不漂亮。 请注意，它还增加了初始页面负载。
不使用 CSS, 和 Javascript 切换图像。 所以你可以预加载图像并在加载时更改它 & ready, 例如：
使用 CSS sprite, 你已经提到过你不想这样做，但我会列出它完成。 IMHO, 这是最好的解决方案。
喜特乐
赞同来自:
添加相同的宽度和高度 #logo, 所以B. #logo:hover, 像这样
#logo {
position: fixed;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
width:XXpx;
height:XXpx;
}
#logo:hover
{
content: url/'logobeforehover.png'/;
width:XXpx;
height:XXpx;
}