Question

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

看了很多地方，找不到答案。

感谢您的帮助。

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

[死链接]

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

<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 specificity problem。

这样的CSS：

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

正在被覆盖：

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

因为background是background-position的缩写（<1}}。

解决这个问题的最简单方法是交换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文件中更进一步。

编辑:(或只是移动.linkIcon样式下面的iconFB等样式）

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>

CSS Sprite没有样式

4 个答案: