如何剪輯元素的背景以僅顯示圖像的一部分？

澄清請看以下圖像。
第一個是我打算實現的。這是一個帶有兩個背景圖像的文本輸入元素，每邊一個。
第二個圖像是包含我需要的圖標的精靈圖像。
現在我的問題是，是否有可能剪輯背景圖像，只顯示圖像的一部分？此外，它可以用於多個背景嗎？如何剪輯元素的背景以僅顯示圖像的一部分？

第一圖象：
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

回答