使用 css 类的背景图像按钮故障答案

【问题标题】：background image button glitch using css class使用 css 类的背景图像按钮故障
【发布时间】：2015-01-30 15:25:35
【问题描述】：

我有一个链接按钮，其背景图像在显示时出现故障，未居中但当悬停变为正常时。两张图片大小相同。

仅显示。图片Here

悬停时。图片Here

在我只使用 BtnSave 类但我想将宽度高度和显示样式分开之前。

代码：

<asp:LinkButton ID="lnkSave" CssClass="BtnIcon Save" runat="server"></asp:LinkButton>

CSS：

.BtnIcon {
    width: 50px; height: 50px; display: block;
}
.Save
{
    background-image: url('../Images/Buttons/save.png');
}
.Save:hover {
    background: url('../Images/Buttons/savehover.png');
}

旧代码：

<asp:LinkButton ID="lnkSave" CssClass="BtnSave" runat="server"></asp:LinkButton>

旧 CSS：

.Save
{
    width: 50px; height: 50px; display: block;
    background-image: url('../Images/Buttons/save.png');
}
.Save:hover {
    width: 50px; height: 50px; display: block;
    background: url('../Images/Buttons/savehover.png');
}

旧代码运行良好，但我认为一遍又一遍地声明相同的样式并不好......或者应该是这样吗？

我需要确保蓝色图标不会在左侧裁剪并使其居中，就像悬停的那个一样，但是使用新代码但似乎无法使用那个居中。

【问题讨论】：

它不应该导致这种情况。请在您的问题中插入一个有效的 sn-p，或在我们可以看到的 Fiddle 中重新创建问题。
如何在 fiddle 上重新创建一个 asp 程序？似乎无法使用 asp 代码工作
它没有。您需要使用运行网站后获得的后渲染 html
不用担心，我想我找到了导致它的错误。
太棒了，请将其作为答案发布并接受。它可能会帮助将来遇到类似问题的其他开发人员:)

标签： css asp.net button

【解决方案1】：

覆盖现有的位置代码。

CSS：

.Save {
    background-position: center center !important;
}

【讨论】：

【解决方案2】：

每当你给某些人提供背景图片时，你都需要声明 url 路径、不重复、背景的 x 位置、背景的 y 位置，甚至给按钮一个合适的宽度和高度，它也可以工作

例如。按钮 {

背景：url(../path) 不重复中心 5px;

width:100px;//按钮应该水平占据多少空间

height:50px;//按钮垂直应该占据多少空间

}

类似的悬停

【讨论】：