CSS kullanarak bir giriş düğmesi resmi nasıl değiştirilir?

Böylece, kullanarak bir görüntü ile bir giriş düğmesi oluşturabilirim

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

Ancak, CSS kullanarak aynı davranışı elde edemiyorum. Mesela denedim

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

burada "myButton" CSS dosyasında şu şekilde tanımlanır:

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

Yapmak istediğim tek şey buysa, orijinal stili kullanabilirdim, ancak fareyle ( myButton:hoversınıf kullanarak ) düğmenin görünümünü değiştirmek istiyorum . Bağlantıların iyi olduğunu biliyorum, çünkü onları sayfanın diğer bölümleri için bir arka plan resmi için yükleyebildim (sadece bir kontrol olarak). Web'de JavaScript kullanarak nasıl yapılacağına dair örnekler buldum, ancak bir CSS çözümü arıyorum.

Bir fark yaratırsa Firefox 3.0.3 kullanıyorum.

Düğmeyi CSS kullanarak biçimlendirmek istiyorsanız, type = "image" yerine bir type = "gönder" düğmesi yapın. type = "image", CSS'de ayarlayamayacağınız bir SRC bekliyor.

Safari'nin herhangi bir düğmeyi istediğiniz şekilde biçimlendirmenize izin vermeyeceğini unutmayın. Safari desteğine ihtiyacınız varsa, bir resim yerleştirmeniz ve formu gönderen bir onclick işlevine sahip olmanız gerekir.

<button>Etiketi kullanabilirsiniz . Bir gönderme için,type="submit" . Ardından düğmenin grafik olarak görünmesini istediğinizde arka plan resmi kullanın.

Şöyle ki:

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

Daha fazla bilgi: 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;
}

Bu, Safari'de bile her yerde çalışır.

Gönderme düğmeleri için CSS resim değiştirme hakkında bu makale yardımcı olabilir.

"Bu yöntemi kullanarak stil sayfaları etkin olduğunda tıklanabilir bir görüntü ve stil sayfaları kapalıyken standart bir düğme elde edersiniz. Hile, resim değiştirme yöntemlerini bir düğme etiketine uygulamak ve göndermek yerine düğme olarak kullanmaktır. giriş kullanarak.

Ve düğme sınırları silinir çünkü bu kullanıcılara görsel bir ipucu sağlar, çünkü o, aynı zamanda eline düğmeye imleç bağlantıları için kullanılan bir şekilli tavsiye değişiklik."

CSS kodu:

#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;
}

İşte daha basit bir çözüm, ancak ekstra çevre div yok:

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

CSS temel bir görüntü değiştirme tekniği kullanır. Bonus puanlar için, bir resim hareketli grafiğinin kullanıldığını gösterir:

<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>

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

İşte benim için Internet Explorer'da işe yarayan şey, Yardımcı tarafından çözümde küçük bir değişiklik yapıldı.

>#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;
}

Etiketinizde hedef olarak blank.gif (1 piksel şeffaf resim) kullanabilirsiniz

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

ve sonra css'de arka plan stili:

.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;}

Önceki cevaplarda bir varyasyon. Opaklığın ayarlanması gerektiğini buldum, elbette bu IE6 ve üzerinde çalışacak. IE8'de düğmenin yanıt vermeyeceği satır yüksekliği çözümünde bir sorun oluştu. Ve bununla bir el imleci de elde edersiniz!

<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;
}

Aşağıdaki en iyi çözüm olduğunu düşünüyorum:

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 ve görüntüler olmadan benim çözüm şudur:

* 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;}

Belki de sadece bir .js dosyasını içe aktarabilir ve JavaScript'te görüntü değiştirme yapabilirsiniz.

Giriş türünü ve hatta src'yi değiştiremeyeceğinizi varsayalım. SADECE oynamak için css var.

İstediğiniz yüksekliği biliyorsanız ve bunun yerine kullanmak istediğiniz bir arka plan resminin URL'sine sahipseniz, şanslısınız demektir.

Yüksekliği sıfıra ve dolgu üstünü istediğiniz yüksekliğe ayarlayın. Bu, orijinal görüntüyü görünmez kılar ve css arka plan resminizi göstermek için mükemmel derecede temiz bir alan sağlar.

Chrome'da çalışır. IE'de çalışıp çalışmadığı hakkında hiçbir fikrim yok. Zekice bir şey yok, muhtemelen değil.

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

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