Как использовать CSS-спрайт для повторного фонового изображения?

Это то, с чем у меня были проблемы в прошлом, и это на мой взгляд, поэтому я сделал простой пример спрайта, чтобы проверить и, надеюсь, получить некоторые ответы.

Если вы просматриваете мой код и демонстрацию здесь http://dabblet.com/gist/2263037

Вы увидите, что у меня есть простой div, который использует фоновое изображение

Ниже DIV у меня есть тот же div, но на этот раз я пытаюсь использовать изображение CSS Sprite вместо

Итак, мой вопрос: возможно ли воспроизвести внешний вид первого DIV с помощью этого спрайт-изображения или изменения, необходимые для изображения спрайта?

Без спрайта

/* Notice wrapper with Single Image */
.notice-wrap {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
}

С изображением Sprite

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
    background-position: 0 -52px;
}

HTML

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

<BR><BR><BR>

<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

ОТВЕТЫ

Ответ 1

Настройка спрайта

Вы можете использовать спрайт изображения, чтобы делать то, что хотите. Они могут повторяться только вдоль одной оси, т.е. Repeat-x, но в вашем случае все, что вам нужно. Кроме того, ваше изображение в спрайте должно выполняться по всей ширине, так как браузер знает, как его выгравировать.

Фокус в том, что ваш повторяющийся фон должен распространяться на FULL WIDTH вашего спрайт-изображения. Это важно. Вот ваше изображение, измененное для соответствия этому критерию:

enter image description here

Настройка CSS

Теперь мы просто ссылаемся на него как обычно, и он будет работать нормально:

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x;
    background-position: 0 -52px;
}

Ответ 2

Я думаю, что в этом случае вам нужно поставить спрайт на его собственную строку. Это должно работать, поскольку ваше изображение ограничено по вертикали до заданной высоты. По крайней мере, это похоже на пример.

Кроме того, изображение должно быть такой же, как и спрайт. Причина, по которой фоновое изображение должно увеличить ширину спрайта, состоит в том, что вы повторяете по оси x, и если в левой части вашего спрайта есть пустое пространство или другое изображение, вы получите что-то похожее на ваш пример.

В вашем примере изображения в вашем спрайте могут не соответствовать этому фоновому изображению, так как они настолько широки. Поэтому было бы лучше, если бы вы выбрали другие изображения, соответствующие размеру этого фонового изображения, возможно, больше фоновых изображений, так как обычно вы можете использовать более тонкие изображения. См. Пример ниже, который я использую на одном из моих веб-сайтов.

И как сказал msigman, вы можете добавить repeat-x, чтобы убедиться, что фон повторяется только вдоль оси x, но если вы ограничили свой div на определенную высоту и правильно позиционировали спрайт, repeat-x может неважно, но это безопаснее.

enter image description here