CSS: изменение размера <li>фонового изображения из спрайта - PullRequest
Новая
       4

CSS: изменение размера <li>фонового изображения из спрайта

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

Возможно ли, что я могу изменить размер фонового изображения <li>, которое в спрайте?

У меня есть этот HTML: 

<li class="bg_image"></li>

, и это CSS:

.bg_image {background:url('sprite.png') no-repeat;
background-position:-422px -46px;width:32px;height:32px;}

Изображение на спрайте имеет ширину и высоту 48 пикселей, потому что используется в другом месте сайта.Я бы предпочел использовать то же самое вместо создания нового HTTP-запроса того же изображения с меньшим размером, либо увеличить размер спрайта.

Можно ли изменить его размер с ширины и высоты в 48px до 32px?

Большое спасибо

Ответы [ 2 ]

1 голос
/ 23 октября 2012

Это легко сделать с помощью свойства background-size CSS3.

Создайте новый класс CSS, который также использует то же (большее) спрайтовое изображение, но с уменьшенным размером фона.Например, если ваш оригинальный спрайт 640px на 320px, вы можете сделать это в CSS: 

.bg_image_new
{
    background-image:url('/your/image.jpg');
    background-size:320px 160px;
    background-position:-422px -46px;
    width:32px;
    height:32px;
}

Примечание. Поскольку вы эффективно уменьшаете фоновый спрайт до нового размера, положение фона изменится.Затем вам нужно будет пересчитать новые позиции.В вашем случае вы делаете сокращение на 33,33% (48px-> 32px), и поэтому позиции также будут на -33,33% меньше.

Наконец, в html просто выполните: 

<li class="bg_image_new"></li>

Это должно сработать, по крайней мере, для современных браузеров.

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

AFAIK невозможно в современных браузерах.По крайней мере, не с вашим HTML.Вы можете иметь фон (z-indexed) <img src="sprite.png" /> в вашем li, который будет иметь соответствующую ширину и высоту.Изображение также должно иметь положение: абсолютное и иметь родительский интервал с позицией: положение: относительное и переполнение: скрытое ... И немного больше настроек.

Я бы сказал, что вы должны сделать больше изображений с правильными размерамизначков или добавьте строки с разными размерами значков в sprite.png.

...