比较来自世界各地的卖家的域名和 IT 服务价格

在用另一个图像替换时悬停光标时,防止图像闪烁 /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>
已邀请:

知食

赞同来自:

总是

将有一些闪烁,因为用户的浏览器必须从服务器上传图像。 TCP & HTTP 有很多开销,最多

快的

, 你可以合理地期待 /即使是非常小的图像/, 是的 100-200 小姐。 经常发生什么明显。 事实上,时间往往较高。

可能的解决方案:

将图像放在页面上的某个位置,但不要显示它。 经常使用安装
display: none

, 但
http://blog.futtta.be/2012/12/ ... none/
; 或者,您可以添加图像
width

&
height


1px


z-index


-1

. IMHO 这并不漂亮。 请注意,它还增加了初始页面负载。

不使用 CSS, 和 Javascript 切换图像。 所以你可以预加载图像并在加载时更改它 & ready, 例如:


var img = new Image//;
img.onload = function// {
$/'#logo'/.attr/'src', $/this/.attr/'src'//;
};
img.src = 'example.com/image'


使用 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;
}

要回复问题请先登录注册