Css 在表格中使用提交按钮制作精灵

我想创建两个精灵按钮来验证（或不验证）一些请求

这是我同意的按钮：

其中24px.png是一个24px大小的方形透明图像

这里是我的“同意”按钮的位置：

下面是我的css：

。图标同意{
背景：url（“agree.png”）；
显示：块；
宽度：24px；
高度：24px；
&.启用{
背景位置：0-24px；
}
&.残疾人{
背景位置：0；
}
&.主动{
文本缩进：-9999px；
&：悬停{
背景位置：0-24px；
}
&：活动{
背景位置：0-48px；
}
}
}

当我在开发环境中使用我的应用程序时，它呈现的正是我想要的。但是如果我把它推到制作阶段，正方形的透明图像就会变成空白，隐藏精灵的背景

---

你有没有一个想法让这个工作，并使它更。。。良好做法？

看起来您正在使用SASS/SCSS。您是否已验证您的SCSS文件在生产中已正确编译？您是否使用任何东西（例如指南针）来组装精灵？

是的，我使用的是SASS/SCSS。如何验证我的SCSS文件是否在生产环境中正确编译？请查看输出的CSS文件。您可以将它们与开发中的CSS文件区分开来，看看是否存在任何明显的问题。另外，请确保您理解运行时环境中的差异，谢谢，但我不知道如何查看输出的CSS文件。您能告诉我怎么做吗？文件在应用程序文件系统中的存储位置取决于您如何配置应用程序，但至少您应该能够从浏览器中看到它们。使用浏览器的开发工具，或者简单地查看页面源代码，查找样式表包含并从那里查看它们。好的，看起来不错，这里是我看到的

。图标同意{background:url（“agree.png”）；显示：block；宽度：24px；高度：24px}。图标同意。启用{background position:0-24px}。图标同意。禁用{background position:0}.icon agree.active{text indent:-9999px}.icon agree.active:hover{background position:0-24px}.icon agree.active:active{background position:0-48px}

这似乎是我的SCS的一个很好的编译。。。