나는이 같은 배경으로 이미지 버튼을 만들려고 노력

Question

버튼 같은 사진 행위를 만들려면 :

HTML

<input type="image" value="submit" src="images/map.png" id="location" /> 

와이 별도의 CSS에서 CSS의 내용 (이다 파일)

#location{ 
position: fixed; 
right: 10px; 
bottom: 20px; 
width: 80px; 
height: 80px; 
z-index: 2; 
background-image: url('../images/map.png'); 
} 

이 HTML 파일 내 CSS 파일의 호출입니다 :

<link rel="stylesheet" href="css/style.css" /> 

문제는 내가 내부에 그림이없는 빈 사각형을 가지고 있다는 것입니다 ...

무엇이 문제입니까? 미리 감사드립니다.

Answer 1

입력 이미지를 사용하지 마십시오.

그냥 사용 input[type="submit"] 또는 input[type="button"]

HTML

<input type="button" value="submit" id="location" /> 

CSS

#location{ 
    position: fixed; 
    text-indent: -9999px; 
    right: 10px; 
    bottom: 20px; 
    width: 80px; 
    height: 80px; 
    z-index: 2; 
    background-color: url('./image/map.png'; 
    border: none; 
} 

Answer 2

나는 요소를 정의하고 거기에 배경을 설정하고이 범위에 대한의 OnClick에 대한 이벤트 핸들러를 정의 선호 버튼으로

<span style="background-image: url(../images/map.png)" onclick="clickFunction"> </span> 
<script> 
    function clickFunction() { 
      // click event handler 
    } 
</script> 

Answer 3

버튼에 background-image을 사용할 때의 문제점을 잘 모르겠습니다. 다음은 간단한 피들입니다. http://jsfiddle.net/YG7sX/.

HTML :

<button id = "location"></button> 

CSS :

#location{ 
    position: fixed; 
    right: 10px; 
    bottom: 20px; 
    width: 80px; 
    height: 80px; 
    background: url(http://placehold.it/80x80) no-repeat; 
    z-index: 2; 
}