更改悬停或活动背景位置的正确方法是什么

发布于 2024-12-20 15:24:33 字数 956 浏览 0 评论 0原文

如果我有一个像这样的按钮：

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;

    }

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

谢谢，阿隆

原文

If I have a button like this one:

a#settingsCloseButton {
        background: url("img/my_account_sprite.png") no-repeat scroll 0 -155px transparent;
        display: block;
        height: 14px;
        text-indent: -3000px;
        width: 14px;
    }

I use to write the :hover and :active like this:

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

My Question is: If I will write it only with background-poistion like this would it get me better loading performence:

a#settingsCloseButton:hover {
        background-posiiton: -14px -155px;
    }

a#settingsCloseButton:active {
        background-posiiton: -28px -155px;

    }

It is easier for to duplicate the whole background properties because then I can tell where the image is being taken from (like the first example). but does it means it re-loads it? Is one option loads faster then the other or they are both the same?

thanks,
Alon

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゃ懵逼小萝莉 2024-12-27 15:24:34

不会因额外负载或类似情况而导致性能损失。一旦浏览器第一次加载图像，它就会在内存中保存该图像，并且不需要每次在样式表中引用它时再次加载它。

仅设置 background-position 属性可以清楚地表明，真正改变的是背景位置。如果其余值（图像、重复、附件）在 :hover 和 :active 状态下不会发生变化，则无需重复它们。

回复收藏 0 原文

谁的新欢旧爱 2024-12-27 15:24:34

老实说，我认为这不会影响性能，因为图像在第一次加载时就已经被缓存了。

但是，我也没有看到两次设置“背景”的用途。
我只会做

a#settingsCloseButton{
    background-image: url('img/my_account_sprite.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

a#settingsCloseButton:hover{
   background-position: -20px -20px;
}

谢伊。

I honestly don't think it would affect performance, since the image is already cached when its loaded for the first time.

But, also - I don't see the use of setting "background" for both times.
I would just do

a#settingsCloseButton{
    background-image: url('img/my_account_sprite.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

a#settingsCloseButton:hover{
   background-position: -20px -20px;
}

Shai.

回复收藏 0 原文

~没有更多了~