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

Question

有关说明，请查看以下图像 第一个是我打算实现的目标。它是一个带有两个背景图像的文本输入元素，每边一个 第二个图像是包含我需要的图标的精灵图像 现在我的问题是，是否可以剪切背景图像以仅显示图像的一部分？此外，是否可以使用多个背景？

第1张图片：

第二张图片：

Answer 1

您将不得不使用两个单独的图标图像来实现此功能。

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

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

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

Answer 2

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

Answer 3

设置你的元素（让我们说div）你的大背景图片，然后用background-position进行调整。您的图像将因元素大小（例如div）而被破坏。

在你的情况下它会在：

background-position: -87 -35;

和div size：

width: 28px; height: 30px

Answer 4

使用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