Wie kann ich meinen <input type = "submit" /> ein Bild machen?

Question

Ich habe ein schönes kleines CSS-Bild, das ein Knopf sein muss. Ich habe ungefähr 20 verschiedene Methoden ausprobiert, von denen keine funktionieren. Ich bekomme entweder nur ein leeres Nichts oder eine Grenze mit nichts drin.

Die html: http://lrroberts0122.github.com/DWS/lab6/level-2/

Das Bild: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

Die CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

ich es nicht ändern kann aus bestimmten Gründen auf "Eintragen", so brauche ich, um herauszufinden, wie man Mach das mit CSS. Danke für Ihre Hilfe!

Answer 1

input[type=submit] { 
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png); 
    border: 0; 
    display: block; 
    height: _the_image_height; 
    width: _the_image_width; 
} 

Answer 2

Verwenden Sie ein Bild Absenden-Button: (. Ich ein Bild nicht ein Online-Formular snailmail was darauf hindeutet, bei der Einrichtung, aber vielleicht gibt es einen Grund für eine solche Vereinigung zu schaffen verwenden würde)

<input type=image src=button.png alt="Submit feedback"> 

Answer 3

Sie können den vom Browser angegebenen Stil für die Schaltfläche überschreiben.

Zum Beispiel, diese zu Ihrem CSS funktioniert der Trick für mich (auf Chrome):

.controls input { 
    background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat; 
    width: 199px; 
    height: 109px; 
    border: none; 
} 

Aber wirklich, wenn Sie nicht den Browser des CSS für die Schaltfläche verwenden wollen, sollten Sie wahrscheinlich <input type='submit'> nicht verwenden überhaupt, und fügen Sie einfach das Bild (über ein <img src="" /> Tag oder ein <div> mit dem Bild als Hintergrund) und fügen Sie einen Klick-Listener an.

Zum Beispiel:

Die html:

<div class="controls"> 
    <img src="/yourimage.png" /> 
</div> 

Die Javascript (vorausgesetzt, Sie verwenden jQuery):

$('.controls img').click(function(){... stuff to do...}); 

Answer 4

HTML:

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/> 
<lable>From HTML tag</lable> 
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/> 

CSS:

.btn{ 
    display: inline-block; 
background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico); 
    position: relative; 
    border-radius: 5px; 
} 
.input{ 
    background: transparent; 
    color: #fff; 
    border: 0; 
    padding-right: 20px; 
    cursor: pointer; 
    position: relative; 
    padding: 5px 20px 5px 5px; 
    z-index: 1; 
} 

JS Fiddle:http://jsfiddle.net/AJNnZ/26/

Answer 5

Eine weitere Möglichkeit, die Art von hackish ist, ist dies (mit jQuery):

<div onclick="$(this).parent('form').submit();"></div> 

Sie dann Ihre div jede mögliche Weise, Sie Stil mögen.

Answer 6

einfache Art und Weise einen INPUT-Tag als Bild

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">