CSS Sprite 未设置样式

Question

我的 CSS 精灵有问题。看起来它正在工作（嗯，对我来说它看起来应该工作）。所有精灵只显示第一个图标，而不显示其他图标。

查了很多地方都没有找到答案。

谢谢你帮助我。

为了节省时间，我把它放在一个单独的页面上。

[死链接]

对于那些因任何原因无法访问该页面的人，这里是代码：

<div class="iconDiv">
    <a href="http://facebook.com/" title="Facebook Page">
        <img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.flickr.com/" title="Flickr Page">
        <img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
    </a>
</div>

CSS 在这里（缩短）：

.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}

非常感谢您的帮助！

Answer 1

您遇到CSS 特异性问题。

像这样的CSS：

.iconFB {
    background-position:0 -40px;
}

被这样覆盖：

.linkIcon {
    ..
    background: url(iconSprite.png) no-repeat top left;
    ..
}

因为background是（除其他外）background-position的简写。

解决此问题的最简单方法是交换两个 CSS 块，如下所示：

.linkIcon {
    width: 36px;
    height: 36px;
    cursor: pointer;
    cursor: hand;
    vertical-align:middle;
    background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
    background-position:0 0;
}
.iconFL {
    background-position:0 -82px;
}
.iconRSS {
    background-position:0 -164px;
}
.iconY {
    background-position:0 -246px;
}

（我修复了 Facebook 图标的位置，从 0 -40px 到 0 0< /代码>）

Answer 2

.linkIcon.iconFB 和 .linkIcon.iconFL 等将解决这个问题。目前，您的 linkIcon 样式会覆盖您在 .iconFB 中设置的位置，因为它位于 CSS 文件的更下方。

编辑：（或者只是将 iconFB 等样式移到 .linkIcon 样式下方）

Answer 3

背景图像的位置被 .linkIcon 中的简写背景覆盖。

重新排序 CSS，或者在 .linkIcon 中使用单独的背景图像和背景重复声明（并且没有背景位置）。我认为后者更可取。

Answer 4

另一种方法是使用 id，因为这些图标可能是唯一的并且不会在同一页面上重复使用。由于它用于“识别”某个图标，因此使用 ID 而不是类是有意义的。

<style>
    #iconFB {
        background-position: 0 0px;
    }

    #iconFL {
        background-position: 0 -82px;
    }

    #iconRSS {
        background-position: 0 -164px;
    }

    #iconY {
        background-position: 0 -246px;
    }
    .linkIcon {
    width: 36px;
    height: 36px;
    cursor: pointer;
    cursor: hand;
    vertical-align: middle;
    background: url(iconSprite.png) no-repeat top left;
}
</style>

<div class="iconDiv">
    <a href="http://facebook.com/" title="Facebook Page">
        <img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.flickr.com/" title="Flickr Page">
        <img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
    </a>
</div>
<div class="iconDiv">
    <a href="#" title="RSS Page">
        <img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.youtube.com/" title="Youtube Page">
        <img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
    </a>
</div>