如何裁剪元素的背景以仅显示图像的一部分？答案

【问题标题】：How to clip an element's background to display only a part of the image?如何裁剪元素的背景以仅显示图像的一部分？
【发布时间】：2012-08-11 12:58:52
【问题描述】：

为了清楚起见，请查看以下图片。
第一个是我打算实现的。这是一个带有两个背景图像的文本输入元素，每侧一个。
第二张图片是包含我需要的图标的精灵图片。
现在我的问题是，是否可以剪切背景图像以仅显示图像的一部分？此外，是否可以在多种背景下使用它？

第一张图片：

第二张图片：

【问题讨论】：

【解决方案1】：

目前，您将不得不使用两个单独的图标图像才能使其按预期工作。

使用 CSS 精灵，背景被元素的大小剪裁，有一个名为 background-clip 的实验性 CSS3 属性，但它不能按照您想要的方式工作（它会剪裁到边框、填充或内容盒子，而不是特定的尺寸。）

所以创建两个图标，在元素的每一侧使用一个background-position。

As you can see here，使用 spritesheet，它将显示整个背景图像，而不是您想要的两个图标。目前还没有办法以您想要的方式剪辑 BG 图像。（希望有一天！）

【讨论】：

【解决方案2】：

您需要使用单独的图标，或者您需要在输入框顶部叠加 2 个附加元素（用于显示图标）。后者会让你使用精灵本身。

【讨论】：

【解决方案3】：

使用CSS3，您可以为一个元素使用多个背景图像。要显示图像中的特定部分，您需要设置其background-position 属性。

例如：

background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;

您还可以以像素为单位定义background-postion，例如：

background-position: -5px 10px, -35px 10px;

更多信息请查看link

【讨论】：

【解决方案4】：

设置你的元素（比如说 div）你的大背景图片，然后用background-position 调整。您的图像将根据您的元素大小（例如 div）进行裁剪。

在你的情况下，它会在：

background-position: -87 -35;

和 div 大小：

width: 28px; height: 30px

【讨论】：