如果我有这样一个按钮:
a#settingsCloseButton {
background: url("img/my_account_sprite.png") no-repeat scroll 0 -155px transparent;
display: block;
height: 14px;
text-indent: -3000px;
width: 14px;
}
我以前是这样写 :hover 和 :active 的:
a#settingsCloseButton:hover {
background: url("img/my_account_sprite.png") no-repeat scroll -14px -155px transparent;
}
a#settingsCloseButton:active {
background: url("img/my_account_sprite.png") no-repeat scroll -28px -155px transparent;
}
我的问题是:如果我只使用 background-poistion 来编写它,它会让我获得更好的加载性能:
a#settingsCloseButton:hover {
background-posiiton: -14px -155px;
}
a#settingsCloseButton:active {
background-posiiton: -28px -155px;
}
复制整个背景属性更容易,因为这样我就可以知道图像是从哪里拍摄的(就像第一个例子)。但这是否意味着它重新加载它?一个选项的加载速度比另一个快,还是两者相同?
谢谢, 阿隆
最佳答案
不会以额外负载或类似的形式引起性能损失。一旦浏览器第一次加载图像,它就会将图像保存在内存中,并且每次在样式表中引用它时都不需要再次加载它。
仅设置 background-position
属性只是清楚地表明,真正改变的只是背景位置。如果 :hover
中的其余值(图像、重复、附件)不会更改,则无需重复这些值。和 :active
州。
关于html - 在悬停或事件时更改背景位置的正确方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8463340/