Cómo agregar una imagen de fondo para el tipo de entrada = "botón"?

He intentado cambiar la imagen de fondo del botón de entrada por css, pero no funciona.Cómo agregar una imagen de fondo para el tipo de entrada = "botón"?

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

lo que podría estar mal?

incluso en línea el css no parecía funcionar.

Fuente

2010-04-29 input

Debería utilizar ' 'en su lugar –

cuando lo intenté, no mostró ningún resultado. de todos modos, gracias a jonathan está funcionando ahora. – input

Debe escribirlo sin la palabra image.

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

Probado en ambos sentidos y funciona éste.

Ejemplo:

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

Fuente

2010-04-29 16:26:02

gracioso. no funciona para mi la consola Firebug solo muestra esto: '.button { cursor: puntero; } ' – input

¿Intentó copiar y pegar lo que está en el cuadro de código en un archivo html para ver si le funciona? También intente usar comillas alrededor de la ruta o elimine la primera '/'. –

k, funciona ahora [el tipo = "botón" que es]! Gracias. Me pregunto qué sucedió con el CSS externo. lo único ahora es que muestra la imagen como fondo del botón con los bordes. ¿Cómo puedo mostrar la imagen sin que parezca un botón? – input

Si se trata de un botón Enviar, use <input type="image" src="..." ... />.

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

Si desea especificar la imagen con CSS, you'll have to usetype="submit".

Fuente

2010-04-29 16:21:12

¿funcionará el 'onclick' en input = "image"? – input

Escriba 'image' y' submit' actúan como submit para que pueda ver el evento submit a través del atributo de etiqueta 'form'' onSubmit'. http://msdn.microsoft.com/en-us/library/ms536972(VS.85).aspx –

Si miras el código que probé y funciona, 'input type =" button "' and 'input type = "image" 'se puede diseñar usando css. Él solo usó la propiedad incorrecta. –

background-image toma una dirección URL como un valor. Utilizar cualquiera

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

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

que es una abreviatura de

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

Además, es posible que desee ver en la button HTML element de fantasía botones de envío.

Fuente

2010-04-29 16:35:38 Tgr

Sólo para añadir a las respuestas, creo que la razón específica, en este caso, además del fuera de lugar no-repeat, es el espacio entre url y (:

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

Fuente

2010-04-29 16:53:13

¡De hecho acabo de probarlo y tienes razón! No funciona con el espacio, pero ese no es el único problema con su código. –

gracias por señalar. buscaba soluciones en esto, y una de las respuestas fue 'no-repeat', por lo tanto, lo intenté. – input

url (/buttonsimages/redheart.jpg) // ESTO NO FUNCIONA PARA MÍ: URL INICIAL CON SLASH url (buttonsimages/redheart.jpg) // ESTE TRABAJO PARA MÍ: URL DE INICIO CON TEXTO – jarimos

Cómo agregar una imagen de fondo para el tipo de entrada = "botón"?

Respuesta

Cuestiones relacionadas