CSS Sprite не стилизован - PullRequest
Новая
       32

CSS Sprite не стилизован

1 голос
/ 21 февраля 2011

У меня проблема с моими 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;
}

Большое спасибо за помощь!

Ответы [ 4 ]

3 голосов
/ 21 февраля 2011

У вас проблема специфичности 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)

1 голос
/ 21 февраля 2011

Другой способ - использовать идентификаторы, поскольку эти значки, вероятно, уникальны и не используются повторно на одной странице.Поскольку он используется для «идентификации» определенного значка, имеет смысл использовать идентификатор вместо класса. 

<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>
1 голос
/ 21 февраля 2011

Положение фонового изображения переопределяется сокращенным фоном в .linkIcon.

Либо измените порядок CSS, либо используйте отдельные объявления background-image и background-repeat (и без background-position) в .linkIcon.Я бы сказал, что последнее предпочтительнее.

1 голос
/ 21 февраля 2011

.linkIcon.iconFB и .linkIcon.iconFL и так далее решат эту проблему. В настоящее время ваш стиль linkIcon перезаписывает позиции, которые вы установили в .iconFB, потому что он находится дальше в файле CSS.

Редактировать: (или просто переместить стили iconFB и т. Д. Ниже стилей .linkIcon)

...