CSS-спрайты с динамическим размером - PullRequest
Новая
       0

CSS-спрайты с динамическим размером

6 голосов
/ 22 сентября 2010

Я решил создать спрайт-лист для всего сайта (+ -30 изображений), чтобы я мог загрузить 1 изображение и просто ссылочные позиции, что сокращает время загрузки изображения и обращения к серверу.

Мой вопрос: Можно ли ссылаться на изображение в листе спрайта, а затем изменить размер этого изображения на 100% его родительского контейнера?

Так, например: 

#SomeDiv
{
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
    width:100px;
}

Ширина моего div равна 100px, но спрайт, на который я хочу сослаться, равен 20px (например) - как я могу увеличить извлеченный спрайт до 100px?

С уважением, Байрон Кобб.

1 Ответ

10 голосов
/ 22 сентября 2010

Ну, если вы действительно хотите получить ответ, конечно, почему бы и нет.См .: http://jsfiddle.net/3dsgn/3/

В основном мы работаем с CSS3, поэтому поддержка IE (кроме 9) отсутствует.Вам также придется использовать версию с расширением -moz- для Firefox 3.6 и ниже.Сама техника также несколько хлопотна.Вам на самом деле нужно идти и вычислять числа самостоятельно - проценты не будут работать, естественно.

#sprite-large {

    /* All of these numbers are 2x their normal, 
       though tweaked slightly so that they will look okay */
    width: 36px;
    height: 36px;
    background: url('url/to/your/image.png') -38px -112px;

    -moz-background-size: 448px 368px;
    background-size: 448px 368px;
}
...