0

当谷歌搜索这个障碍时，它提出了大量关于如何在将图像用作表单中的按钮时应用 css 和不同的静态按钮作为翻转的信息。

我的问题是，您将如何更改每个鼠标事件（在按钮上）的按钮，以及如果您对所有状态都使用一个图像？

例如...我的按钮有以下 HTML

<input type="image" id="login_submit" name="login_submit" src="button_login.png" />

除此之外，我有以下我以前使用过的 CSS...

#login_submit a {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
   background-position: -141px 0;
}
#login_submit a:active {
   background-position: -282px 0;
}

现在显然它目前不起作用......那我该怎么做呢？我正在寻找一个更“纯粹”的 CSS 解决方案，所以没有 JS 来照亮这一天。

还是我应该坚持为每个状态使用 2/3 个单独的按钮？

4

2 回答 2

1

好吧，主要问题似乎是您正在尝试将作为孩子的锚设置为“#login_submit”而不仅仅是“#login_submit”，试试这个：

#login_submit {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
   background-position: -141px 0;
}
#login_submit:focus {
   background-position: -282px 0;
}

祝你好运，狮子座

于 2012-05-29T01:47:41.040 回答
0

我也有这个问题，但刚刚解决了。

通过使用输入 type="image" 并将 1x1px 空白（透明）.png 或 .gif 添加到表单元素的 src。然后使用 CSS 将背景设置为双（或在上述情况下为三）翻转图像。表单元素使用空白的 .png 作为图像，但在其下方是 CSS 处理的背景图像，显示了一个漂亮的工作翻转，并在其高度和宽度上具有提交按钮功能。

=)

代码直接取自我的情况：

HTML：

<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>

CSS：

#send
{
    height: 25px;
    width: 107px;
    overflow: hidden;
    display: block;
    float: right ;
    background: url('../images/style/button-send.png');
}


#send:hover
{
    background-position: 0 -25px;
}

我希望这有帮助。=)

顺便说一句，对我来说，这种方法也解决了 svict4 提到的问题。=)

于 2015-10-08T08:27:45.133 回答