仅通过CSS定位我的图像精灵

时间:2013-04-14 17:29:38

标签: css css-sprites

好的,对不起......这是一个基本的CSS问题,但它让我发疯。我是自学成才,所以我确信我只是错过了一些简单的东西。

网站:http://notes.benadelt.com

徽标图片精灵只是一个家庭链接......我正在尝试删除你可以看到的破坏图像透明度的背景颜色:

<a class="ben-logo" href="/"></a>

您可以看到CSS为该部分中的任何链接提供了浅色背景颜色,该颜色也应用于图像精灵。我试图从我的图像中删除背景颜色,但不是从身体链接中删除,并且无法弄明白。使用开发工具我只能使用以下方式影响样式:

header .words a { background: none; }

但这显然会删除所有链接的背景,因此它也会删除精灵中的图像背景。

想象一下,我可以在后台URL之后添加一些内容,例如:

background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;

当你悬停时,看起来我希望它在没有背景颜色的情况下正常显示。

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

header .words a.ben-logo { background-color: transparent; }

以上代码仅定位徽标链接。通过将背景颜色设置为透明,您可以保留图像本身(以及所有其他背景属性!)。

编辑:有一件事 - 我相信由于没有指定颜色(透明是默认设置),您已经在该背景图像上设置了透明设置。在你的情况下可能发生的是a.ben-logo声明出现在样式表中的.words a声明之前,因此它被覆盖了。上面的代码应该修复它的原因是因为额外的类名称增加了更多的特异性。以下是Andy Clarke的特异性备忘单供您阅读:http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg