如何使用精灵作为输入翻转？

Question

有没有快速简便的方法来使用精灵在输入上创建翻转？     

我对输入并不熟悉，特别是关于输入翻转的操作。我理解在标签上使用精灵。我也得到了使用Javascript onMouseOut和两个图像的概念，但我更喜欢使用精灵。它们似乎效果最好，我不必担心闪烁。

这是我正在使用的图片：

以下是我正在使用的代码：

<style>
#newsletterSubmit{background:url(/Images/Buttons/submit.png) 0 0 no-repeat;display:block;width:90px;height:50px;text-indent:-9000px;}
</style>

 <input id="newsletterSubmit" type="image" src="Images/Buttons/Submit.png" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px -50px';" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px 0px';" />

Answer 1

你不需要javascript或onmouseover，它可以用CSS完成。这是一个简单的例子：

<input type="submit" value="Submit">

input {
    display:block;
    text-indent:-9000px;
    border:0;
    padding:0;

    background:url(/Images/Buttons/submit.png) 0 0 no-repeat;
    width:90px;
    height:50px;
}

input:hover {
   /* Move the background image up 50px (height of button) */
   background-position:0 -50px;  
}

演示：http://jsbin.com/ihafib

您需要检查精灵的坐标并正确裁剪，以确保所有内容都正确排列。