Question

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

仅显示。图片Here

当盘旋时。图片Here

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

CODE：

<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>

OLD 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');
}

旧代码工作正常，但我认为一遍又一遍地声明相同的风格并不好......或者那应该是什么？

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

Answer 1

覆盖现有的位置代码。

CSS：

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

Answer 2

每当你向某些人提供背景图片时，你需要声明网址路径，不重复，背景的x位置，背景的y位置，甚至给按钮一个合适的宽度和高度它将起作用

例如。按钮{

background：url（../ path）no-repeat center 5px;

宽度：100px; //空格按钮应占据多少水平

高度：50px; //多少空格按钮应占据垂直

}

同样适用于悬停

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

2 个答案: