如何用图像填充提交按钮？

Posted 2023-03-05

【中文标题】如何用图像填充提交按钮？

【英文标题】：How can I fill a submit button with an image?

【发布时间】：2013-05-31 20:31:31

【问题描述】：

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

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

但问题是图像（具有 h:40px 和 w:40px）不会缩小以适应 20px 按钮...你们有什么解决方案吗？ （如果可能，我宁愿不使用 javascript）

编辑： 正在工作。我只是删除历史记录，现金和它的工作原理...... ty

【问题讨论】：

说真的，我永远不会将 Java 用于这样的事情。 Java 不是 JavaScript。

IMO 的最佳解决方案是存储大小为 20px/20px 的图像；这样浏览器在渲染页面时就不需要它了。

哪个浏览器？因为对我来说，它就像你期望的那样工作。它缩小了

background-size: cover;?

***.com/questions/7935456/…

【参考方案1】：

试试这个：-

background-size:20px 20px;

【讨论】：

请注意，IE 8 及更早版本不支持背景大小

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

【参考方案2】：

改为使用image submit button，并使用 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"
 />

【参考方案3】：

在css文件中添加这一行：

display:block;

【参考方案4】：

您需要包装一个跨度来提交按钮并为其设置样式。

演示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%;        

【参考方案5】：

给按钮添加一个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 小提琴here.

【讨论】：

点击正文（按钮旁边）更改图片。

【参考方案6】：

您可以简单地使用图像类型的输入，它正是为此目的而存在的：提交显示图像的按钮。作为奖励，您还将获得用户点击的坐标。

例子：

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

Live test case.

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

【参考方案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>