我怎样才能拍出我的照片？

Question

我有一个漂亮的小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进行此操作。谢谢您的帮助！

Answer 1

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

Answer 2

使用图像提交按钮，正如the doc所说：

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

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

（在设置在线表单时，我不会使用建议使用snailmail的图像，但也许有一些理由可以创建这样的关联。）

Answer 3

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

例如，将此添加到您的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>以图像作为背景）并附加一个点击监听器它。

例如：

html：

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

javascript（假设你使用jQuery）：

$('.controls img').click(function(){... stuff to do...});

Answer 4

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/

Answer 5

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

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">

Answer 6

另一种方式是hackish（使用jQuery）：

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

然后你以任何你喜欢的方式设计你的div。