Как я могу масштабировать изображение в спрайте CSS
В этой статье, http://css-tricks.com/css-sprites/, это говорит о том, как я могу обрезать от меньшего изображения из 1 большего изображения. Можно ли сказать мне, если возможно/как, что я могу обрезать от меньшего изображения и затем масштабировать обрезанный от региона, прежде чем я размечу его?
Вот пример от той статьи:
A
{
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
background-position: -10px -56px;
}
Я хотел бы знать, как я могу масштабировать то изображение после того, как я обрезаю его от от spriteme1.png
Вот URL примера: http://css-tricks.com/examples/CSS-Sprites/Example1After/
Таким образом, я хотел бы знать, могу ли я сделать значки рядом с Item1,2,3,4 меньшими?
2 ответа
попробуйте использовать размер фона: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
что-то мешает вам рендерить изображения в нужном размере?
Когда вы используете спрайты, вы ограничены размерами изображения в спрайте. Свойство CSS background-size , упомянутое Стивеном, пока еще широко не поддерживается и может вызвать проблемы с браузерами, такими как IE8 и ниже - и, учитывая их долю рынка, это не жизнеспособный вариант.
Другой способ решить проблему - использовать два элемента и масштабировать спрайт с помощью тега img , например:
<div class="sprite-image"
style="width:20px; height:20px; overflow:hidden; position:relative">
<!-- set width/height proportionally, to scale the sprite image -->
<img src="sprite.png" alt="icon"
width="20" height="80"
style="position:absolute; top: -20px; left: 0;" />
</div>
Таким образом, внешний элемент ( div.sprite-image ) обрезает изображение размером 20x20 пикселей из тега img , которое действует как масштабированное фоновое изображение .