170

在这篇文章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旁边的图标变小？

4

15 回答 15

141

2021 年更新：大多数主要浏览器都支持背景大小，但如果您的移动浏览器不支持它，请使用缩放。

您可以使用background-size，因为大多数浏览器都支持它（但不是全部http://caniuse.com/#search=background-size）

background-size : 150% 150%;

或者

您可以将缩放组合用于 webkit/blink/ie 和transform:scale用于 Mozilla(-moz-) 和旧 Opera(-o-) 用于跨浏览器桌面和移动设备

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

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

.icon-small{
    zoom:0.29;
    /*  Mozilla support */
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}
于 2013-04-18T10:52:42.243 回答
32

当您使用精灵时，您受限于精灵中图像的尺寸。Stephen 提到的background-sizeCSS 属性尚未得到广泛支持，并且可能会导致 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) 将从标签中裁剪出 20x20px 的图像img，其作用类似于缩放的background-image.

于 2010-03-18T16:41:23.697 回答
20

试试这个：Stretchy Sprites - 跨浏览器，CSS sprite 图像的响应式大小调整/拉伸

此方法“响应式”缩放精灵，以便根据您的浏览器窗口大小调整宽度/高度。它不用 background-size作旧浏览器中对此的支持是不存在的。

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
于 2012-05-31T02:35:56.940 回答
14

transform: scale();将使原始元素保持其大小。

我发现最好的选择是使用vw. 它就像一个魅力：

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}
<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

于 2016-12-10T11:21:19.670 回答
11

这似乎对我有用。

如果精灵在网格中，则将精灵的background-size数量设置为 100%，将精灵的数量设置为 100%。然后使用background-position -<x*100>% -<y*100>%where x 和 y 是从零开始的精灵

换句话说，如果你想要左边的第 3 个精灵和第 2 行的 2 上和 1 下所以

background-position: -200% -100%;

例如，这是一个 4x2 精灵表

在此处输入图像描述

这是一个例子

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }
<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

如果精灵的大小不同，您需要将background-size每个精灵的 设置为 a 百分比，以使精灵的宽度变为 100%

换句话说，如果图像是 640 像素宽并且该图像内的精灵是 45 像素宽，那么将 45 像素设为 640 像素

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

然后你需要设置偏移量。偏移的复杂性是 0% 左对齐，100% 右对齐。

在此处输入图像描述

作为一名图形程序员，我希望 100% 的偏移量可以在元素上 100% 移动背景，换句话说，完全偏离右侧，但这并不是 100% 与backgrouhnd-position. background-position: 100%;表示右对齐。因此，在缩放后考虑到这一点的论坛是

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

假设偏移量为 31px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

这是带有 2 个精灵的 640x480 图像。

  1. 31x 27y 尺寸 45w 32h
  2. 在 500x 370y 尺寸 105w 65h

在此处输入图像描述

遵循上述精灵 1 的数学运算

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714


div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}
<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

于 2019-06-19T09:43:17.150 回答
7

这就是我所做的。请记住，它不适用于 IE8 及以下版本。

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

背景图像的宽度将随着父级的#element缩小而缩小。如果你转换height成百分比，你也可以对它的高度做同样的事情。唯一棘手的一点是计算background-position.

第一个百分比是精灵目标区域在正常宽度下的宽度除以精灵的总宽度，再乘以 100。

第二个百分比是缩放前精灵目标区域的高度除以精灵的总高度，再乘以 100。

这两个等式的措辞有点草率，所以如果您需要我更好地解释它，请告诉我。

于 2011-10-07T13:43:34.960 回答
5

旧帖子，但这是我使用的background-size:cover;（@Ceylan Pamir 的帽子提示）......

示例用法
水平圆形翻转器（悬停在正面图像上，用不同的图像向后翻转）。

示例
精灵 480px x 240px

示例最终尺寸
单个图像@ 120px x 120px

通用代码
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

缩写案例小提琴
http://jsfiddle.net/zuhloobie/133esq63/2/

于 2015-05-01T18:18:22.930 回答
4

尝试使用背景尺寸：http ://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

有什么东西阻止你以你想要的尺寸渲染图像吗？

于 2010-03-12T03:32:19.403 回答
4

我花了一段时间来为这个我满意的问题创建一个解决方案：

问题：

  • 一个 SVG 图标精灵 - 比如说 80px x 3200px

  • 我们希望在内容选择器 (:before/:after) 中以各种大小在不同位置缩放它们的每次使用，而不需要根据使用的大小重新定义每个精灵的坐标。

<button>因此，此解决方案允许您在 a 中使用相同的精灵坐标，<menuitem>同时仍对其进行缩放。

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

通过在背景位置使用百分比（到小数点后 2 位）而不是其他人在此处建议的背景大小，您可以将相同的图标声明缩放到任何大小，而无需重新声明它。

位置 y 百分比是原始精灵高度/图标高度，以 % 表示 - 在我们的例子中，这里 80px*100/3200px == 每个精灵由 2.5% 的 y 位置表示。

如果您有悬停/鼠标悬停状态，您可以将精灵的宽度加倍并在 position-x 坐标中指定。

这种方法的缺点是，在以后添加更多图标会改变精灵高度和 y 位置 %，但如果你不这样做，那么你的精灵坐标将需要针对你需要的每个缩放分辨率进行更改。

于 2016-08-03T15:29:26.967 回答
3

使用transform: scale(...);和添加匹配margin: -...px来补偿缩放的可用空间。（您可以使用* {outline: 1px solid}查看元素边界）。

于 2018-02-05T15:39:29.330 回答
2

好吧，我认为找到了一个更简单的缩放图像的解决方案：示例 - 假设您想要使用具有 3 个大小相等的精灵的图像，使用 CSS 来缩放图像

background-size : 300% 100%;

然后指定需要应用于您的 html 元素的自定义高度和宽度，例如：

 width :45%;
 height:100px;

示例代码如下所示：

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

我对 css 很陌生，样式不是我最好的领域，这可能是一种错误的做法。但它在 Firefox/Chrome/Explorer 10 中对我有用，希望它也适用于旧版本。

于 2013-10-14T16:32:11.220 回答
2

2018 年在这里。使用带有百分比的背景大小。

床单：

这假设有单行精灵。工作表的宽度应该是一个可以被 100 + 一个精灵的宽度整除的数字。如果您有 30 个 108x108 像素的精灵，则在末尾添加额外的空白以使最终宽度为 5508 像素（50*108 + 108）。

CSS：

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML：

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>
于 2018-10-06T16:29:12.713 回答
2

使用transform: scale(0.8);您需要的值而不是 0.8

于 2019-09-05T02:12:12.000 回答
-1

将宽度和高度设置为精灵图像的包装元素。使用这个 CSS。

{
    background-size: cover;
}
于 2014-10-13T15:15:51.617 回答
-8

容易...在精灵的工作表上使用具有不同比例的相同图像的两个副本。在应用程序的逻辑上设置坐标和大小。

于 2015-06-23T15:23:19.613 回答