0
我試着按照前面剪切圖像的數學方法，把自己的圖像放在那裏，但它只是顯示爲空白，你能告訴我問題在哪裏嗎？CSS無法正確切分圖像[Sprite Box]？
#paymentForm {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
background-color: #f9f9f7;
border: 1px solid #fff;
height: auto;
padding: 13px 20px;
margin-top:30px;
width: 287px;
}
#paymentForm span{color: #555555; font-size: 11px}
#paymentForm li {
margin: 8px 0;
}
#paymentForm label {
color: #555;
display: block;
font-size: 14px;
font-weight: 400;
}
#paymentForm input[type=text]{
background-color: #fff;
border: 1px solid #e5e5e5;
color: #333;
display: block;
font-size: 18px;
height: 32px;
padding: 0 5px;
width: 275px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#paymentForm input::-webkit-input-placeholder {
color: #ddd;
}
#paymentForm input:-moz-placeholder {
color: #ddd;
opacity: 1;
}
#paymentForm input::-moz-placeholder {
color: #ddd;
opacity: 1;
}
#paymentForm input:-ms-input-placeholder {
color: #ddd;
}
#paymentForm input:focus {
outline: 1px solid #3388dd;
}
#paymentForm #card_number {
background-image: url(https://i.stack.imgur.com/nGINL.png), url(https://i.stack.imgur.com/nGINL.png);
background-position: 2px -121px, 260px -61px;
background-size: 120px 361px, 120px 361px;
background-repeat: no-repeat;
padding-left: 54px;
width: 225px;
height: 20px;
}
#paymentForm #card_number.visa {
background-position: 2px -163px, 260px -61px
}
#paymentForm #card_number.visa_electron {
background-position: 2px -205px, 260px -61px
}
#paymentForm #card_number.mastercard {
background-position: 2px -247px, 260px -61px
}
#paymentForm #card_number.maestro {
background-position: 2px -289px, 260px -61px
}
#paymentForm #card_number.discover {
background-position: 2px -331px, 260px -61px
}
#paymentForm #card_number.valid.visa {
background-position: 2px -163px, 260px -87px
}
#paymentForm #card_number.valid.visa_electron {
background-position: 2px -205px, 260px -87px
}
#paymentForm #card_number.valid.mastercard {
background-position: 2px -247px, 260px -87px
}
#paymentForm #card_number.valid.maestro {
background-position: 2px -289px, 260px -87px
}
#paymentForm #card_number.valid.discover {
background-position: 2px -331px, 260px -87px
}
#paymentForm #card_number.amex {
background-position: 2px -373px, 260px -61px;
}
#paymentForm #card_number.valid.amex {
background-position: 2px -373px, 260px -87px;
}<div id="paymentForm">
<input type="text" name="card_number" id="card_number" class="valid visa" maxlength="20" placeholder="1234 5678 9012 3456">
</div>我決定增加我自己的這些線路在這裏
#paymentForm #card_number.amex {
background-position: 2px -373px, 260px -61px;
}
#paymentForm #card_number.valid.amex {
background-position: 2px -373px, 260px -87px;
}
我不明白這些值
padding-left: 54px;
width: 225px
，我必須改變這些值太？
下面是我添加了最後一張名片「美國運通卡」的圖像，但它顯示爲空白圖像。 
你剛纔打錯'背景position'值。嘗試一個較小的值。並儘量避免精靈 - 主要是避免自建精靈，沒有任何自動構建過程。 –