0

我目前正在使用图像精灵作为我的标志，所以当你将鼠标悬停在标志上时，它会变成红色。对于 HTML，我是这样设置的：

<div id="logo-wrap">
  <a id="logo" href="<?php bloginfo('url'); ?>"></a>
</div>
         ​

#000我的目标是通过添加“logo-wrap” div来设置背景颜色，但没有任何改变。但是，如果我添加background: #000 url(imageurl);到A#logo背景中，则会出现。

为徽标本身添加颜色不允许我在黑色背景中添加填充。它打乱了整个“精灵”的想法。

我正在尝试找到一种方法为徽标设置单独的背景并添加大约 10 像素的填充。

这可能吗？还是我必须更改 HTML 和 CSS 才能完成此操作？

小提琴//

http://jsfiddle.net/dFmQK/

4

1 回答 1

1

从你的问题来看，我认为这就是你想要的。

将此用于您的 CSS

    #logo-wrap { background: #123; width:176px; height:61px; padding: 10px;}
    A#logo {     width:176px; height:61px; background: url(http://keihead.com/test/images/trd_sprite.png) 0 0 no-repeat; position:relative; float: left;}
    A#logo:hover { background-position: 0 -61px;   }

http://jsfiddle.net/dFmQK/1/

于 2012-11-07T23:47:31.187 回答