CSS спрайты без введения новых элементов - PullRequest
Новая
       4

CSS спрайты без введения новых элементов

1 голос
/ 16 октября 2011

На моем сайте есть заголовки, перед каждым из которых есть изображение.

HTML 

<section id="about">
    <h2>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS 

h2 {
    padding-left: 24px;
    background-repeat: none;
}

#about h2 {
    background-image: url(../images/about.png);
}

#where_to_buy h2 {
    background-image: url(../images/where_to_buy.png);
}

С большим количеством заголовков это означает множество крошечных png-файлов, которые я хотел бы объединить в один CSS-спрайт, чтобы уменьшить количество HTTP-запросов. Однако я могу думать только о том, чтобы сделать это, добавив в разметку новый элемент, которого я бы предпочел избежать.

HTML 

<section id="about">
    <h2><span class="icon"/>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2><span class="icon"/>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS 

h2 .icon {
    width: 24px; height: 24px;
    display: inline-block;
    background: url(../images/heading_icons.png) no-repeat;
}

#about h2 .icon {
    background-position: 0 0;
}

#where_to_buy h2 {
    background-position: -24px 0;
}

Есть ли эффективный способ представить спрайты CSS без добавления ненужных новых элементов в разметку?

Ответы [ 3 ]

2 голосов
/ 16 октября 2011

Вы можете использовать спрайт CSS, который загружается для всех элементов h2. 

h2 {
  background: url(...);
}

Затем вы задаете позицию для определенного раздела, чтобы просто показать спрайт для раздела about. Например, 

#about h2 {
  background-position: 0 50px;
}
0 голосов
/ 16 октября 2011

Вариант 1:

В зависимости от изображения спрайта и текста заголовка.Вы можете быть в состоянии осуществить это.Но без дополнительного тега span вы бы НЕ имели реального контроля;так как часть фона для одного заголовка может отображаться на другом.Я имею в виду, что если текст заголовка переносится на следующую строку, то на нем может отображаться значок следующего заголовка.Вы должны оставить правильное количество интервалов вокруг каждой иконки, чтобы она работала так, как вы хотите.По сути, вам нужно оставить определенное пространство вокруг каждого значка в вашем спрайте, тогда вы можете делать то, что предлагал @endyourif, вместе с @Barta Tamás.

Option2:

Если вы нене заботитесь о обратной совместимости браузера, и CSS3 является опцией, вы можете использовать свойство background-clip.

0 голосов
/ 16 октября 2011

Я думаю, что в вашем случае самым простым решением было бы создать спрайт, на котором ваши значки отображаются в вертикальном списке, так что вам не нужно беспокоиться об обрезке фонового изображения (что, я думаю, ваша проблема).Тогда вы можете просто использовать 

background-position: 0 <your icon's size * # of icon>px;
background-repeat:no-repeat;

, чтобы контролировать, какую иконку вы хотите показать.

Редактировать : мне пришло в голову еще одно решение - использовать псевдоэлементы,как: после или: до.Тогда вашей разметке не нужно вводить новый элемент, но он будет.Позвольте мне объяснить на примере с комментариями: 

#contact:before {
    content:''; /* this is required for the generated element to show up */
    display: inline-block /* this makes it sizeable and also well positioned */
    width: 32px; /* I assume your icon size is 32 pixel, but change it */
    height: 32px;
    background-position: 32px 64px; /* this way you can position your background
                                       both horizontally and vertically */
    background-image: url('bla');
}
...