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

澄清请看以下图像。
第一个是我打算实现的。这是一个带有两个背景图像的文本输入元素，每边一个。
第二个图像是包含我需要的图标的精灵图像。
现在我的问题是，是否有可能剪辑背景图像，只显示图像的一部分？此外，它可以用于多个背景吗？如何剪辑元素的背景以仅显示图像的一部分？

第一图象：
enter image description here

第二图象：
enter image description here

你将不得不使用两个单独的图标图像可以让您按照您期望的那样工作。

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

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

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

2012-08-15 08:01:34 Kyle

这就是我想出来的。你确定没有其他方法吗？ – 2012-08-15 08:02:50

很不幸，这是唯一的办法尚未，也许有一天会实现，但现在，2个图标是去与此的唯一方法:) – Kyle 2012-08-15 08:08:43

希望这一天到来的时候传递很快！谢谢。 ;） – 2012-08-15 08:18:51

设为您的元素（假设格）侑大backgound图片，然后用background-position调整。您的图片将被您的元素尺寸（例如div）所遮盖。

在您的情况下，将围绕：

background-position: -87 -35;

和DIV大小：

width: 28px; height: 30px

2012-08-15 07:59:49 Samich

请重新阅读该问题。我有一个输入元素，我需要它像上图中显示的一样大。 – 2012-08-15 08:07:22

这是我在说什么：http://jsfiddle.net/jg7C6/3/ – Samich 2012-08-15 08:25:39

我现在明白了。谢谢。 – 2012-08-15 08:29:35

与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

2012-08-15 07:59:56 Amyth

谢谢，但这不是我问的。我知道如何使用多个背景。我的主要问题是如何剪辑背景图片。 – 2012-08-15 08:03:50

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

2012-08-15 08:12:01 techfoobar

后者不会允许精灵在主'输入'上使用而不重新排列spritesheet的布局。 – Kyle 2012-08-15 08:14:05

@KyleSevenoaks - 精灵将需要作为背景应用于叠加元素，而不是输入框本身。正如你所说，bg不能被今天的CSS技术所裁剪。 – techfoobar 2012-08-15 08:15:45

啊，现在我得到你。好吧，这将工作，但会需要一些不需要的标记。 – Kyle 2012-08-15 08:18:29

回答