Embed image in a <button> element

2020-01-25 05:28发布

站内文章 / HTML/CSS
25 0 0

问题:

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all. In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.

This is the HTML code:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...

回答1:

You could use input type image.

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

It works as a button and can have the event handlers attached to it.

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

<button style="background: url(myimage.png)" ... />


回答2:

If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).

Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS: 

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Output:



回答3:

try this

   <input type="button" style="background-image:url('your_url')"/>


回答4:

The simplest way to put an image into a button:

<button onclick="myFunction()"><img src="your image name here.png"></button>

This will automatically resize the button to the size of the image.



回答5:

Why don't you use an image with an onclick attribute?

For example:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>


回答6:

Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">


回答7:

<body>
  <a
    href="https://jadeyoung1324.manyvids.com"
    target="https://jadeyoung1324.manyvids.com"
  >
    <img
      src="https://img1.wsimg.com/isteam/ip/05ca250c-5519-4115-a072-5f6959c1b01d/Pink.ManyVids.Button.png/:/"
      width="215"
      height="125"
      style="border:0px solid gold;"
      alt="Manyvids"
    />
  </a>
</body>


回答8:

Buttons don't directly support images. Moreover the way you're doing is for links ()

Images are added over buttons using the BACKGROUND-IMAGE property in style

you can also specify the repeats and other properties using tag

For example: a basic image added to a button would have this code:

    <button style="background-image:url(myImage.png)">

Peace



标签： html css image button
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~