Question

我目前正在使用图片精灵作为我的徽标，因此当您将鼠标悬停在徽标上时，它会变为红色。对于HTML，我这样设置：

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

我的目的是通过添加“logo-wrap”div将背景颜色设置为#000，但没有任何变化。但是，如果我将background: #000 url(imageurl);添加到 A#logo ，则会显示背景。

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

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

这可能吗？或者我是否必须更改HTML和CSS才能完成此任务？

小提琴 //

http://jsfiddle.net/dFmQK/

Answer 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/

使用透明精灵时，给A＃Logo一个背景颜色？

1 个答案: