<button> 요소에 이미지 포함

<button>HTML 의 요소에 png 이미지를 표시하려고합니다 . 버튼은 이미지와 크기가 같으며 이미지가 표시되지만 어떤 이유로 중앙에 표시되지 않으므로 모든 것을 볼 수 없습니다. 다시 말해, 이미지의 오른쪽 상단 모서리는 버튼의 오른쪽 상단이 아니라 버튼 중앙에있는 것처럼 보입니다.

이것은 HTML 코드입니다.

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

업데이트 :
실제로 발생하는 것은 마진 문제입니다. 두 개의 픽셀 여백이 생겨서 배경 이미지가 버튼을 벗어납니다. 버튼과 이미지의 크기는 동일 20px하므로 매우 눈에.니다 margin:0. padding:0, 시도했지만 도움이되지 않았습니다 ...

입력 유형 이미지를 사용할 수 있습니다.

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

버튼으로 작동하며 이벤트 핸들러를 첨부 할 수 있습니다.

또는 CSS를 사용하여 배경 이미지로 버튼의 스타일을 지정하고 테두리, 여백 등을 적절하게 설정할 수 있습니다.

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

이미지가 예를 들어 프로필 그림과 같은 의미 론적 데이터 인 경우 <img>내부 의 요소 를 사용하고 <button>CSS를 사용하여의 크기를 조정하십시오 <img>. 이미지가 버튼을 시각적으로 만족스럽게 만드는 방법이라면 CSS background-image를 사용 하여 스타일을 지정하고를 <button>사용하지 마십시오 <img>.

데모 : 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;
}

산출:

이 시도

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

이미지를 버튼에 넣는 가장 간단한 방법 :

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

이 버튼은 이미지 크기에 맞게 자동으로 크기가 조정됩니다.

왜 이미지를 사용하지 않습니까? onclick 속성이 않습니까?

예를 들면 다음과 같습니다.

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

프로젝트에 이미지 이름으로 새 폴더를 추가하십시오. 이미지 폴더에 이미지를 넣습니다. 그러면 잘 작동합니다.

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

이 형식을 시도하고 "width"속성을 사용하여 이미지 크기를 관리하십시오. 간단합니다. JavaScript도 요소로 구현할 수 있습니다.

<button><img src=""></button>

버튼은 이미지를 직접 지원하지 않습니다. 또한 당신이하는 방식은 링크 ()

스타일의 BACKGROUND-IMAGE 속성을 사용하여 버튼 위에 이미지가 추가됩니다.

태그를 사용하여 반복 및 기타 속성을 지정할 수도 있습니다

예를 들어, 버튼에 추가 된 기본 이미지는 다음 코드를 갖습니다.

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

평화