如何在提交按钮中添加图片？

Question

我有一个带有以下代码的提交按钮：

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

在我的 CSS 中，我有：

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

但问题在于图片（高度为40像素，宽度为40像素）不会自动缩小以适应20像素的按钮...您们有什么解决办法吗？ （如果可能的话，我不想使用JavaScript）

编辑： 目前已经解决。我只需删除历史记录和缓存，就可以正常显示了...谢谢。

- Nelson Monteiro

---

我不会在这种情况下使用Java，因为Java和JavaScript不同。 - Antony

在我看来，最好的解决方案是将图像存储为20px/20px的大小；这样浏览器在渲染页面时就不需要再去获取它了。 - Stijn Geukens

哪个浏览器？对我来说它的表现就像你期望的那样。它会缩小。 - Hanky Panky

background-size: cover; 可以解决问题，因为它填充整个按钮。但是，它会缩小吗？从未测试过。 - Kees Sonnema

https://dev59.com/wmsz5IYBdhLWcg3wYGvQ - Rito

Answer 1

尝试这个：-

background-size:20px 20px;

- Anurag-Sharma

---

请注意，IE 8及更早版本不支持background-size。 - Henrik Karlsson

对于IE 8及更高版本的任何问题，请参见此页面http://css-tricks.com/forums/discussion/19221/background-size-and-ie8/p1 - Anurag-Sharma

Answer 2

使用图像提交按钮代替，然后使用CSS将元素缩小到所需的尺寸。

<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />

- Jukka K. Korpela

Answer 3

给按钮添加一个id，更新图片：

document.body.onclick=function(e){
    debugger;
    var bid=document.getElementById('bid');
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}

在这里js fiddle。

- WhyMe

---

点击按钮旁边的区域以更改图像。 - WhyMe

Answer 4

add this line in css file:

display:block;

- mayaa

Answer 5

您需要将标签包装在提交按钮周围并进行样式设置。

演示 http://jsfiddle.net/H5dmd/2/

HTML

<form method="post">
    <span class="icon">
        <input name="submit" type="submit" value=" "/>
    </span>
</form>

CSS

input[type=submit]{
    background:transparent;
    width:20px;
    height:20px;
    border:none;
    padding:none;
    cursor:pointer;
}
.icon{
    float:left;
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;        
}

- yeyene

Answer 6

您可以使用类型为“image”的输入框，它正是为了这个目的而存在：提交按钮显示一个图像。额外的好处是您还将获得用户单击的坐标。

示例：

<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />

实时测试案例。

唯一的缺点是，在处理表单的服务器端代码中，您必须检查“mysubmit.x”和/或“mysubmit.y”是否为空，以知道是否收到了任何发送的内容，这比仅检查“mysubmit”不太直观。

- Shadow The Spring Wizard

Answer 7

我在这里看到多个选项：

更改保存方式

将您的图像保存为20x20，问题就解决了。

使用CSS3

CSS3引入了一个新功能backgroud-size

只需将其放入您的CSS中：

background-size: 20px 20px;

但它将不兼容旧版浏览器。

使用JavaScript [不好的风格]

HTML

<form method="POST" action="test.php" name="myform">
    <a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>

- Jerska