html - CSS 无法正确按像素切割图像 [Sprite Box]？

Question

我尝试按照之前剪切图像的数学计算并将我自己的图像放在那里，但它只是显示为空白，你能告诉我问题出在哪里吗？

#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(/image/nGINL.png), url(/image/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;
}

我不明白这些值(value)观

padding-left: 54px;
width: 225px

我也必须更改这些值吗？

这是我添加的最后一张美国运通卡的图像，但它显示为空白图像。

Answer 1

如果您查看输入的呈现方式，所讨论的两个值将执行以下操作:

padding-left: 54px; 确保文本输入不会与信用卡类型的背景图像重叠。

带填充:

没有填充:

width: 225px; 是专门设置的，因为验证复选标记图像也被设置为特定值。这不是必需的，可以做出响应，但在这种情况下，所有内容都设置为精确的像素值。

美国运通的正确定位是:

#paymentForm #card_number.amex {
  background-position: 2px -338px, 260px -61px;
}
#paymentForm #card_number.valid.amex {
  background-position: 2px -338px, 260px -87px;
}

调试和调整它们的最简单方法之一是打开开发人员工具，将光标放在其中一个像素值上，然后按 up 或 down 箭头键盘。您会真正看到背景图像移动并能够微调值。

http://g.recordit.co/8mYkxkPlhl.gif

    #paymentForm #card_number {
        background-image: url(/image/nGINL.png), url(/image/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 -338px, 260px -61px;
    }
    #paymentForm #card_number.valid.amex {
      background-position: 2px -338px, 260px -87px;
    }

<div id="paymentForm">
  
  <input type="number" id="card_number" class="valid amex" />
  
</div>