Html 如何剪裁元素'；是否仅显示图像的一部分？

有关说明，请参见以下图片。
第一个是我打算实现的目标。这是一个文本输入元素，有两个背景图像，每侧一个。
第二个图像是包含我需要的图标的精灵图像。
现在我的问题是，是否可以剪辑背景图像以仅显示图像的一部分？此外，是否可以将其用于多个背景

第一张图片：

第二张图片：

设置你的元素（比如div）或大背景图片，然后使用

背景位置进行调整。您的图像将被您的元素大小（例如div）所覆盖

在您的情况下，它将围绕：

background-position: -87 -35;

和div大小：

width: 28px; height: 30px

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

例如：

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

您还可以定义
背景位置
像素，如：

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

有关更多信息，请检查此图标。您必须使用两个单独的图标图像，才能使其按您目前的预期工作

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

因此，创建两个图标，在元素的每一侧使用一个，背景位置为

，它将显示整个背景图像，而不是您想要的两个图标。目前还没有办法以你想要的方式剪辑BG图像。（希望有一天！）
您需要使用单独的图标，或者需要在输入框顶部覆盖两个附加元素（用于显示图标）。后者可以让你使用精灵本身。
这就是我想到的。你确定没有其他方法吗？不幸的是，这是目前为止唯一的方法，也许有一天它会实现，但现在，两个图标是唯一的方法：）希望这一天很快就会过去！谢谢谢谢，但这不是我要的。我知道如何使用多种背景。我的主要问题是如何剪辑背景图像。请重读这个问题。我有一个输入元素，我需要它与上图所示的一样大。如果不重新排序精灵表的布局，后者将不允许在主
输入
上使用精灵。@KyleSevenoaks-精灵需要作为覆盖元素的背景，而不是输入框本身。因为正如你所说，bg不能用今天的CSS技术剪裁。啊，现在我明白了。好的，这样做可以，但需要一些不必要的标记。@KyleSevenoaks-实际上，这完全可以通过CSS使用：before和：after伪元素来完成，从而避免了额外标记的需要。