如何顯示的圖像爲背景

我有這樣的代碼：

input[type="checkbox"]:not(old) + label { 
    background: url("sprites.gif") no-repeat -220px -54px; 
    box-sizing: border-box; 
    height: 25px; 
    padding: 0 0 0 35px; 
}

的事情是，我使用的背景圖像中包含許多精靈，所以我只是想要在座標0 -100px上顯示。但是，由於標籤寬度可能會有所不同（因爲包含文本的長度），它還會顯示我需要的精靈旁邊的精靈。

如何在不編輯圖像的情況下解決此問題？我只想顯示25x25像素的背景圖像。剩下的我不需要。身高我可以定義，但我不能寬度，因爲正如我已經說過，它必須符合標籤中的文字。

謝謝。

input[type="checkbox"]:not(old) + label { 
 
     background: url(http://cdn.sstatic.net/Sites/stackoverflow/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -220px -54px; 
 
     box-sizing: border-box; 
 
     height: 25px; 
 
     padding: 0 0 0 35px; 
 
    }

<input type="checkbox"><label>Some randome text</label>

來源

2016-09-07 Cain Nuke

你能提供一個鏈接到一個原型 – Terabyte

片段加入到這個問題。 –

而不是直接在label應用background，創建一個僞元素，它的大小與圖像的在你的精靈的尺寸和改爲使用您的background。

input[type="checkbox"]:not(old)+label{ 
 
    box-sizing:border-box; 
 
    height:25px; 
 
} 
 
input[type="checkbox"]:not(old)+label::before{ 
 
    background: url(http://cdn.sstatic.net/Sites/stackoverflow/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -220px -54px; 
 
    content:""; 
 
    display:inline-block; 
 
    margin-right:10px; 
 
    height:25px; 
 
    vertical-align:bottom; 
 
    width:25px; 
 
}

<input type="checkbox"><label>Some random text</label>

來源

2016-09-07 13:09:12 Shaggy

這是我最後的手段，我不想使用它，但似乎是唯一的方法。謝謝。 –

如果這已經回答了您的問題，請考慮接受:) – Shaggy

您的問題：不要緊密結合它（不適用標籤上的背景），而不是創建該圖像的新跨越。這也將有助於保持你的代碼乾淨

.sprite { 
 
    display: inline-block; 
 
    background: 
 
url(http://cdn.sstatic.net/Sites/stackoverflow/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -225px -50px; 
 
    height: 25px; 
 
    width: 25px; 
 
}

<input type="checkbox"><span class="sprite"></span><label>Some randome text</label>

來源

2016-09-07 12:13:49

謝謝，但如果你看看我的問題的代碼，你會看到我已經知道背景位置，因爲我正在使用它。問題不在於此。問題是精靈只有25px寬，左側有更多的精靈，所以如果容器（在這種情況下是標籤）寬於25px，那麼左邊的精靈將顯示。 –

設置高度和寬度爲25px和25px;使用X和Y值決定哪個部分完成！ _看看我編輯的答案_ –

請再次閱讀我的問題。我不能將寬度設置爲25px，因爲那麼標籤WONT FIT內的文字。看看我剛編輯的代碼片段。 –

如何顯示的圖像爲背景

回答

相關問題