CSS를 사용하여 입력 버튼 이미지를 변경하는 방법은 무엇입니까?

이미지를 사용하여 입력 버튼을 만들 수 있습니다.

<INPUT type="image" src="/images/Btn.PNG" value="">

그러나 CSS를 사용하여 동일한 동작을 얻을 수 없습니다. 예를 들어, 나는 시도했다

<INPUT type="image" class="myButton" value="">

여기서 "myButton"은 CSS 파일에서 다음과 같이 정의됩니다.

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

그것이 내가하고 싶은 모든 것이라면, 원래 스타일을 사용할 수는 있지만 ( myButton:hover클래스를 사용하여 ) 호버에서 버튼의 모양을 변경하고 싶습니다 . 페이지의 다른 부분에 대한 배경 이미지를 위해 링크를로드 할 수 있었기 때문에 링크가 좋습니다. JavaScript를 사용하여 웹에서 수행하는 방법에 대한 예제를 웹에서 찾았지만 CSS 솔루션을 찾고 있습니다.

차이가 나는 경우 Firefox 3.0.3을 사용하고 있습니다.

CSS를 사용하여 버튼의 스타일을 지정하려면 type = "image"대신 type = "submit"버튼으로 만드십시오. type = "image"는 CSS에서 설정할 수없는 SRC를 예상합니다.

Safari에서는 원하는 방식으로 단추의 스타일을 지정할 수 없습니다. Safari 지원이 필요한 경우 이미지를 배치하고 양식을 제출하는 onclick 기능이 있어야합니다.

<button>태그 를 사용할 수 있습니다 . 제출하려면 간단히 추가하십시오 type="submit". 그런 다음 단추를 그래픽으로 표시하려면 배경 이미지를 사용하십시오.

이렇게 :

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

추가 정보 : http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Safari에서도 어디서나 작동합니다.

제출 버튼의 CSS 이미지 대체에 대한이 기사 가 도움이 될 수 있습니다.

"이 방법을 사용하면 스타일 시트가 활성화되면 클릭 가능한 이미지가 표시되고 스타일 시트가 꺼져 있으면 표준 버튼이 표시됩니다. 트릭은 이미지 대체 방법을 단추 태그에 적용하고 제출 단추 대신 사용하는 단추입니다. 입력을 사용.

버튼 테두리가 소거되기 때문에, 이는 사용자에게 시각적 팁을 제공하기 때문에, 또한 손으로 버튼을 커서 링크에 사용되는 하나의 모양 변화를 추천합니다. "

CSS 코드 :

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

다음은 더 간단한 솔루션이지만 추가 div가 없습니다.

<input type="submit" value="Submit">

CSS는 기본 이미지 교체 기술을 사용합니다. 보너스 포인트의 경우 이미지 스프라이트를 사용하여 표시됩니다.

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

출처 : http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

다음은 Philoye의 솔루션을 약간 수정 한 Internet Explorer에서 나를 위해 일한 것입니다.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

태그에서 blank.gif (1px 투명 이미지)를 대상으로 사용할 수 있습니다

<input type="image" src="img/blank.gif" class="button"> 

그런 다음 CSS에서 배경 스타일을 지정하십시오.

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

이전 답변의 변형. 불투명도를 설정해야한다는 것을 알았습니다. 물론 IE6 이상에서 작동합니다. 버튼이 응답하지 않는 IE8의 행 높이 솔루션에 문제가있었습니다. 그리고 이것으로 당신은 손 모양 커서도 얻습니다!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

다음이 최선의 해결책이라고 생각합니다.

CSS :

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html :

<input class="edit-button" type="image" src="transparent.png" />

js와 이미지가없는 내 솔루션은 다음과 같습니다.

* HTML :

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS :

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

아마도 .js 파일을 가져 와서 JavaScript로 이미지를 대체 할 수 있습니다.

입력 유형 또는 src를 변경할 수 없다고 가정 해 봅시다. 당신은 단지 CSS를 가지고 있습니다.

원하는 높이를 알고 있고 대신 사용하려는 배경 이미지의 URL이 있으면 운이 좋을 것입니다.

높이를 0으로 설정하고 패딩 상단을 원하는 높이로 설정하십시오. 원본 이미지를 보이지 않게하여 CSS 배경 이미지를 보여주기 위해 완벽하게 깨끗한 공간을 제공합니다.

Chrome에서 작동합니다. 그것이 IE에서 작동하는지 전혀 모른다. 영리한 일이 거의 없기 때문에 아마도 그렇지 않습니다.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">