html - 图像作为按钮

Question

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

• > Link 1
• > Link 2

你能帮我看看哪里出了问题吗(我是初学者，很抱歉，如果这是一个非常简单的问题并且解决方案很容易......)？

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>

---

海事组织:

我会创建一个 <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>