html - 在悬停或事件时更改背景位置的正确方法是什么

Question

如果我有这样一个按钮:

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;

    }

复制整个背景属性更容易，因为这样我就可以知道图像是从哪里拍摄的(就像第一个例子)。但这是否意味着它重新加载它？一个选项的加载速度比另一个快，还是两者相同？

谢谢，阿隆

Answer 1

不会以额外负载或类似的形式引起性能损失。一旦浏览器第一次加载图像，它就会将图像保存在内存中，并且每次在样式表中引用它时都不需要再次加载它。

仅设置 background-position属性只是清楚地表明，真正改变的只是背景位置。如果 :hover 中的其余值(图像、重复、附件)不会更改，则无需重复这些值。和 :active州。