css - 使用精灵时如何裁剪背景图像

Question

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

Answer 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; 
    }

Answer 2

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

这样，您可以将 'normal' 元素设置为position: relative和:afterto position: absolute;。

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

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

Answer 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;
}