如何在CSS精灵中缩放图像 [英] How can I scale an image in a CSS sprite

问题描述

在本文中， http://css-tricks.com/css-sprites/，它谈到我如何裁剪从一个较大的图像较小的图像。你能告诉我是否可以/如何裁剪一个较小的图像，然后在裁剪出裁剪区域之前缩放裁剪区域？

In this article, http://css-tricks.com/css-sprites/, it talks about how can I crop off a smaller image from 1 bigger image. Can you please tell me if it is possible/how I can crop off a smaller image and then scale the cropped off region before I lay it out?

这里是一个例子从该文章：

Here is an example from that article:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

我想知道如何裁剪图像来自spriteme1.png

I would like to know how can I scale that image after I crop it from from spriteme1.png

以下是示例的URL：
http://css-tricks.com/examples/CSS-Sprites/Example1After/

Here is the URL of the example: http://css-tricks.com/examples/CSS-Sprites/Example1After/

推荐答案

您可以使用背景尺寸（如果适用于您），因为它在所有浏览器中不受支持。

You could use background-size if that works for you, as its not supported in all browsers.

background-size : 150% 150%;

或

对于web浏览器的缩放和对于跨浏览器桌面的Firefox（-moz-）和Opera（-o-）的 transform：scale 移动

You can use a combo of zoom for webkit/ie and transform:scale for Firefox(-moz-) and Opera(-o-) for cross-browser desktop & mobile

[class^="icon-"]{
    display: inline-block;
    background: url('../img/icons/icons.png') no-repeat;
    width: 64px;
    height: 51px;
    overflow: hidden;
    zoom:0.5;
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

.icon-huge{
    zoom:1;
    -moz-transform:scale(1);
    -moz-transform-origin: 0 0;
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
    -moz-transform-origin: 0 0;
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}

这篇关于如何在CSS精灵中缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！