图像作为按钮答案

【问题标题】：Image as a button图像作为按钮
【发布时间】：2015-01-02 21:24:34
【问题描述】：

我正在处理 HTML 页面，我想将图像用作按钮。我的问题是它以灰色显示按钮，而我想用作背景的图像较小，整个按钮位于另一个位置。我链接了两张图片，第一张展示了它应该是什么样子，第二张是我设法做到的。

你能帮我解决什么问题吗（我是初学者，如果这是一个非常简单的问题并且解决方案很容易......）？

HTML 中的代码是：

<button type="image" name="in_cart">
    <img src="pic/in_cart.png">
</button>

有了这个图像 - 没有让它像一个按钮一样 - 处于正确的位置，但作为一个按钮它显示了第二张图像中的状态

CSS：

#in_cart {
   position:absolute;
   top:165px;
   left:600px;
   width: 300px;
   height: 35px;
}

【问题讨论】：

您正在寻找可能的答案：http://stackoverflow.com/questions/15461317/button-background-image

标签： html css

【解决方案1】：

您可以在您的 css 文件中使用背景图片：

button{
  height:300px;
  width:200px;
  background-image: url(https://placekitten.com/g/200/300);
  background-repeat: no-repeat;
  color:red;
  }

&lt;button&gt;I'm a button!!!!&lt;/button&gt;

国际海事组织：

我会创建一个<a> 元素，并相应地设置它的样式（而不是使用图像，而是使用 css 来“创建”你的图像）：

a{
  
  height:100px;
  width:200px;
  background:black;
  padding:10px;
  border-radius:20%;
  color:gold;
  text-decoration:none; 
  font-family:times;
  }

&lt;a href="#"&gt;I'm your styled link&lt;/a&gt;

【讨论】：

这应该是使用css而不是使用图像来设置按钮样式的正确方法，因为图像按钮很简单。
css 非常强大，因此应该用于此目的（尤其是因为它可以减少元素数量）。
它还会删除另一个获取图像的请求，并在传输图像时节省几百字节，从而使页面加载更快。响应式设计也比较好，可以根据屏幕宽度改变按钮的宽高。

【解决方案2】：

你可以使用

<input type="image" src="pic/in_cart.png" name="in_cart" width="300" height="35">

之后，您可以使用 CSS 添加其他属性。

【讨论】：

【解决方案3】：

（P.S. 在 CSS 中，#in_cart 按 id 而非名称选择元素。）

我有一些建议：

您可以在按钮上设置背景图像属性。
您可以将按钮位置设置为相对位置，并将其图像设置为绝对位置，并将top、bottom、left 和right 属性设置为0。

这是第二个选项的代码：

HTML：

<button type="image" name="in_cart">
    <img src="pic/in_cart.png">
</button>

CSS：

[name="in_cart"] {
    position: relative;
}

[name="in_cart"] > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

您也可以将图像包装在标签中，请参阅 user3281326 答案。

我建议不要为按钮设置绝对位置。您可能希望稍后将其放置在代码中的不同位置等...我建议将其包装在单独的<div> 中，因为在网站上定位是网格的责任。

【讨论】：

【解决方案4】：

试试这个而不是button：

<input type="image" name="in_cart" src="pic/in_cart.png">

【讨论】：