Question

我正在处理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;
}

Answer 1

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

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

<button>I'm a button!!!!</button>

<强> IMO：

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

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

<a href="#">I'm your styled link</a>

Answer 2

您可以使用

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

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

Answer 3

尝试使用此代替button：

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

Answer 4

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

我有一些建议：

您可以在按钮上设置background-image属性。
您可以将按钮位置设置为相对位置，将其图像设置为绝对位置，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 answer。

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

图像作为按钮

4 个答案: