使用精灵时如何裁剪背景图像答案

【问题标题】：How to crop a background image when using sprite使用精灵时如何裁剪背景图像
【发布时间】：2014-10-02 21:39:17
【问题描述】：

这是文件：http://studioteknik.ca/stackoverflow_question/test1.html 当时我只需要查看一张背景图片，假设是第二张。它距顶部 400 像素，但我需要将其图像裁剪为顶部 400 高度。怎么做？

【问题讨论】：

我建议您将这些图像拆分为单独的文件并根据需要显示
Sprite 在不加载图像的情况下显示许多图像要快得多。如果它真的是背景图片？我可以剪辑/裁剪它吗？

标签： css image background

【解决方案1】：

一般内容图像不应该是背景或精灵，它们应该是使用IMG标签的内嵌图像。 Sprites 通常保留给 UI 元素，例如图标和菜单元素。

<div class="sprite1"></div>

CSS：

.sprite1 { 
        height:400px;
        width:400px;
        background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
        background-position:0 -400px; 
    }

【讨论】：

如果背景图片是 800px 但容器 div 只有 400px 怎么办？如何调整大小？

【解决方案2】：

我使用伪元素（之前/之后）为精灵生成我想要的框大小，并将背景图像添加到其中。

这样您可以将“正常”元素设置为position: relative，将:after 设置为position: absolute;。

然后将after 放置在您想要的位置，使其与主容器相关，并且后元素的大小可防止图像精灵“溢出”。

我在这里更全面地记录了该技术：http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/

【讨论】：

【解决方案3】：

是的 - 这是一个很好的答案。通常，您定位精灵的方式与定位普通图像的方式完全相同，但要设置高度和宽度，以便它们仅覆盖其中的一部分。背景位置是唯一改变的东西。如果我有一个 40 像素高的精灵并想显示它有 2 个 20 像素高的图像，代码将是这样的：

  .sprite1{ height:20px;
 width:20px;
 background-image:url("myimage.jpg");
  background-position: 0 0;
 }

.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}

【讨论】：