190

所以，我可以使用图像创建一个输入按钮

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

4

12 回答 12

121

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

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

于 2008-10-12T16:10:18.913 回答
115

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

像这样：

<button type="submit" style="border: 0; background: transparent">
 <img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

更多信息

于 2008-10-12T16:14:13.603 回答
76 

div.myButton input {
  background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: none;
}
<div class="myButton">
  <INPUT type="submit" name="" value="">
</div>

这在任何地方都可以使用，即使在 Safari 中也是如此。

于 2009-07-28T10:54:51.123 回答
25

这篇关于提交按钮的 CSS 图像替换的文章可能会有所帮助。

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

_

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;
}
于 2008-10-12T16:12:31.217 回答
13

这是一个更简单的解决方案，但没有额外的周围 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/

于 2011-02-03T02:38:40.767 回答
3

这是在 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;
}
于 2011-02-11T16:09:11.607 回答
2

您可以使用blank.gif（单像素透明图像）作为标签中的目标：

<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;}
于 2011-04-01T17:56:43.463 回答
2

先前答案的变体：

我发现需要设置不透明度，当然这适用于 Internet Explorer 6 及更高版本。Internet Explorer 8 中的 line-height 解决方案存在问题，即按钮没有响应。有了这个，你也会得到一个手形光标！

<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;
}
于 2011-04-15T20:59:41.317 回答
2

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

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" />
于 2012-04-23T19:14:00.547 回答
1

我没有 JavaScript 和图像的解决方案是这样的：

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;
}
于 2012-11-20T20:10:37.850 回答
0

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

于 2008-10-25T19:40:52.283 回答
0

假设您无法更改输入类型，甚至无法更改src。你只有CSS 可以玩。

如果你知道你想要的高度，并且你有一个你想要使用的背景图片的 URL，那么你很幸运。

将高度设置为零并将填充顶部设置为您想要的高度。这会将原始图像推到视线之外，为您提供一个非常干净的空间来显示您的 CSS 背景图像。

它适用于 Chrome。我不知道它是否适用于 Internet Explorer。几乎没有什么聪明的事情，所以可能不会。

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}
<input type="image" src="daft.jpg" id="daft">

于 2020-03-11T12:19:41.130 回答