Question

因此，我可以使用

创建一个带图像的输入按钮

<INPUT type="image" src="/images/Btn.PNG" value="">

但是，我无法使用CSS获得相同的行为。例如，我试过

<INPUT type="image" class="myButton" value="">

其中“myButton”在CSS文件中定义为

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

如果这就是我想要的，我可以使用原始样式，但我想在悬停时更改按钮的外观（使用myButton:hover类）。我知道链接很好，因为我已经能够为页面的其他部分加载它们作为背景图像（就像检查一样）。我在网上找到了如何使用JavaScript进行操作的示例，但我正在寻找一种CSS解决方案。

如果有所不同，我正在使用Firefox 3.0.3。

Answer 1

如果您想使用CSS设置按钮样式，请将其设为type =“submit”按钮而不是type =“image”。 type =“image”需要一个SRC，你无法在CSS中设置。

请注意，Safari不会让您按照您要查找的方式设置任何按钮的样式。如果您需要Safari支持，则需要放置图像并具有提交表单的onclick功能。

Answer 2

您可以使用<button>标记。对于提交，只需添加type="submit"即可。然后在希望按钮显示为图形时使用背景图像。

像这样：

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

更多信息：http://htmldog.com/reference/htmltags/button/

Answer 3

<强> HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

<强> CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

即使在Safari中，这也适用于任何地方。

Answer 4

这篇关于CSS image replacement for submit buttons的文章可能有所帮助。

“使用此方法，您可以在样式表处于活动状态时获得可点击的图像，并在样式表关闭时获得标准按钮。诀窍是将图像替换方法应用于按钮标记并将其用作提交按钮，而不是使用输入。

并且由于按钮边框被擦除，因此建议将按钮光标更改为手形用于链接，因为这为用户提供了一个视觉提示。“

CSS代码：

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Answer 5

这是一个更简单的解决方案，但没有额外的周围div：

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

CSS使用基本的图像替换技术。对于奖励积分，它显示使用图像精灵：

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

来源： http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Answer 6

以下是我在Internet Explorer上的工作原理，这是Philoye对解决方案的一点修改。

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Answer 7

您可以在标记中使用blank.gif（1px透明图像）作为目标

<input type="image" src="img/blank.gif" class="button">

然后在css中设置样式背景：

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Answer 8

以前答案的变体。我发现需要设置不透明度，当然这可以在IE6中使用。 IE8中的行高解决方案存在问题，按钮无法响应。有了它，你也可以得到一个手形光标！

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Answer 9

我认为以下是最佳解决方案：

的CSS：

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

HTML：

<input class="edit-button" type="image" src="transparent.png" />

Answer 10

我没有js和没有图像的解决方案是：

*的 HTML：

<input type=Submit class=continue_shopping_2 name=Register title="Confirm Your Data!" value="confirm your data">

*的 CSS：

.continue_shopping_2:hover{ background-color:#FF9933; text-decoration:none; color:#FFFFFF;} .continue_shopping_2{ padding:0 0 3px 0; cursor:pointer; background-color:#EC5500; display:block; text-align:center; margin-top:8px; width:174px; height:21px; border-radius:5px; border-width:1px; border-style:solid; border-color:#919191; font-family:Verdana; font-size:13px; font-style:normal; line-height:normal; font-weight:bold; color:#FFFFFF;}

Answer 11

也许您也可以导入一个.js文件，并在JavaScript中替换图像。

Answer 12

让我们假设您不能更改输入类型，甚至不能更改src。您只有CSS可以玩。

如果您知道自己想要的高度，并且拥有要使用的背景图片的网址，那么您很幸运。

将高度设置为零，并将padding-top设置为所需的高度。这将使原始图像不可见，从而为您提供了一个非常干净的空间来显示CSS背景图像。

在Chrome中工作。不知道它是否可以在IE中使用。几乎任何聪明的事情都做不到，

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">

如何使用CSS更改输入按钮图像？

12 个答案: