23

我有一个漂亮的小 CSS 图像,它需要是一个按钮。我已经尝试了大约 20 种不同的方法,但都没有奏效。我要么得到一个空白,要么得到一个内部没有任何东西的边框。

html: http: //lrroberts0122.github.com/DWS/lab6/level-2/

图片: http: //lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

CSS: http: //lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

由于某些原因,我无法将其更改为“提交”,因此我需要弄清楚如何使用 CSS 使其工作。感谢您的帮助!

4

6 回答 6

46

正如文档所说,使用图像提交按钮:

<input type="image">将图像定义为提交按钮

<input type=image src=button.png alt="Submit feedback">

(在设置在线表单时,我不会使用暗示 snailmail 的图像,但也许有一些理由会创建这样的关联。)

于 2012-10-13T19:01:22.170 回答
33
input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}
于 2012-10-13T18:49:56.840 回答
2

将 INPUT 标签制作为图像的简单方法

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">
于 2017-01-30T06:39:29.150 回答
1

您可以覆盖浏览器给按钮的样式。

例如,将其添加到您的 css 对我来说(在 Chrome 上)可以解决问题:

.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}

但实际上,如果您不打算将浏览器的 css 用于按钮,则可能根本不应该使用<input type='submit'>,只需插入图像(通过<img src="" />标签或<div>以图像为背景的 a)并为其附加点击侦听器。

例如:

的HTML:

<div class="controls">
    <img src="/yourimage.png" />
</div>

javascript(假设您使用 jQuery):

$('.controls img').click(function(){... stuff to do...});
于 2012-10-13T19:14:28.293 回答
1

HTML:

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>

CSS:

.btn{
    display: inline-block;
 background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
    position: relative;
    border-radius: 5px;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

JS 小提琴:http: //jsfiddle.net/AJNnZ/26/

于 2013-11-25T12:08:46.657 回答
-1

另一种有点 hackish 的方式是(使用 jQuery):

<div onclick="$(this).parent('form').submit();"></div>

然后你可以随心所欲div地设计你的风格。

于 2013-12-03T12:26:14.700 回答