Botones con imagen y degradado

[jandrogdz]

Buenas foro

Tengo ya varios dias tratando de hacer botones que tengan un degradado y una imagen pero aun sin exito.
El problemas es que al poner el degradado se quita la imagen y necesito que sean los dos ya que asi me lo solicitaron alguien tiene alguna idea de como hacerlos.

Se los agradeceria bastante.

[pzin]

CSS3 permite definir múltiples fondos para un sólo elemento. Como el degradado realmente es como si fuera otro imagen, tendrás que tratarlo como tal.

Así pues, haz algo como:

Código CSS:

background-image: imagen1, imagen2;
 

[jandrogdz]

Gracias por responder.

Me podrías explicar como hacerlo, se utilizar el css pero no se manejar mucho eso de los fondos.

este es mi css:

Código CSS:

background-image: url('../imagenes/guardar.png');
    background-position: 5px center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    padding: 1% 1% 1% 4.500%;
    color: #bbbbbb;
    font-weight: 700;
    text-shadow: 1px 1px 1px #ffffff;
    border: solid 1px #aaaaaa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1));
    background: -moz-linear-gradient(top,  #ffffff,  #f1f1f1);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
 

[rikype]

Entiendo que quieres un botón con un degradado y que en ese botón además haya un icono, verdad?

Por qué no lo tratas como 2 clases diferentes?, es decir, que uno sea:

.boton -> con el degradado
.ico-guardar -> con el icono y la posición que ocupará

Así puedes definir un "div" con las dos clases y, en teoría, debería funcionar...

Un saludo!

[pzin]

Iniciado por rikype

Así puedes definir un "div" con las dos clases y, en teoría, debería funcionar...

No, porque tendría el mismo problema; se sobreescribirían los valores y sólo tomará el valor de la segunda clase referenciada.

Con fondos múltiples es como debes de hacerlo.

Código CSS:

algo {
  background-image:  url(../imagenes/guardar.png),
                    -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1));
  background-position: 5px center;
  background-size: 30px 30px,
                   100%;
  background-repeat: no-repeat;
}
 

[rikype]

Llevas razón Bonez, pero la funcionalidad de fondos múltiples es de CSS3, anteriormente había que definirlo de otra manera no?

¿no tendrá problemas con algunos navegadores?

[pzin]

Con navegadores modernos no tendrá problemas. Pero para una retro-compatibilidad tendría que cambiar muchas cosas, y no creo que merezca la pena, ya que es de suponer que un fondo no hará que la web sea desfuncional.

La sintaxis de los fondos no ha cambiado. Simplemente lo puse así para que se viera mejor. Al igual que muchos lenguajes, CSS es bastante anárquico con los espacios en blanco. Así que puedes ponerlo como más te guste.