web-dev-qa-db-fra.com

Comment ajouter une image d'arrière-plan pour le type d'entrée = "bouton"?

j'ai essayé de changer l'image de fond du bouton d'entrée via css, mais cela ne fonctionne pas.

search.html:

<body>
    <form name="myform" class="wrapper">
        <input type="text" name="q" onkeyup="showUser()" />
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
         <p>
             <div id="txtHint"></div>
         </p>
    </form>
</body>

search.css:

.button {
    background-image: url ('/image/btn.png') no-repeat;
    cursor:pointer;
}

qu'est-ce qui pourrait mal se passer?

même aligner le css n'a pas semblé fonctionner.

htmlcssbutton
40
input

Vous devez le taper sans le mot image.

background: url('/image/btn.png') no-repeat;

Testé dans les deux sens et celui-ci fonctionne.

Exemple:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>
53
Jonathan Czitkovics

Juste pour ajouter aux réponses, je pense que la raison spécifique dans ce cas, en plus du mal placé no-repeat, est l’espace entre url et (:

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
15
Pekka 웃

background-image prend une URL comme valeur. Utilisez soit

background-image: url ('/image/btn.png');

ou

background: url ('/image/btn.png') no-repeat;

qui est un raccourci pour

background-image: url ('/image/btn.png');
background-repeat: no-repeat;

En outre, vous voudrez peut-être consulter le button élément HTML pour les boutons de soumission sophistiqués.

6
Tgr

S'il s'agit d'un bouton d'envoi, utilisez <input type="image" src="..." ... />.

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html

Si vous voulez spécifier l'image avec CSS, vous devrez utilisertype="submit".

3
Greg K