Add text on img type="button"-CodePudding

I have button like this

<img type="button" src="ans.png">

But I want to put text on this button.

However, value="" doesn't work.

It looks simple quesiton,but I couldn't find the right answer.

I appreciate any help??

CodePudding user response：

You Cannot Make A Image Button With <img type=button>. but you can make a <button> and give a background image from css

button{
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 10px;
}

<button>Button</button>

CodePudding user response：

there is no such thing as type attribute for the img tag. - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

if you want to put an image on a button you may have a button tag with an img tag inside it like this:

<button id="close-image"><img src="http://example.com/path/to/image.png"></button>

or an input with image type like this:

<input type="image" src="http://example.com/path/to/image.png" />

CodePudding user response：

.image_buttton {
  position:relative;
  padding: 5px 10px;
  border: 1px solid black;
  min-width:100px;
  height: 35px // as the image height;
}
.image_buttton .img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1
}
.image_buttton .img img {
  width:100%;
  height:100%;
}
.image_buttton .text {
  position: relative;
  z-index:10;
  color: red;
}

<button class="image_buttton">
  <span class="text">button text</span>
  <span class="img">
    <img src="https://picsum.photos/200/300">
  </span>
</button>

CodePudding user response：

<img /> tag used for embedding Image on HTML document. It doesn't have any type or value attribute.

If you want to show a background image on a button, try this:

HTML

<button class="image_buttton">button text</button>

CSS

button{
    width: 200px;
    height: 300px;
    background: url(https://picsum.photos/200/300);
 }