¿Agregar imágenes cuando se usan gradientes de CSS?

Estoy intentando crear un botón usando degradados de CSS más un ícono que va en la parte superior del degradado. Intenté 2 formas y ambas fueron un fracaso.¿Agregar imágenes cuando se usan gradientes de CSS?

Primero:

.btn { 
    background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)); 
    background: url(../images/btn.png); 
}

que debería de sabía que lo haría, no de trabajado! Pero también escuché acerca de las imágenes de fondo múltiples de CSS3, así que lo intenté de esa manera.

Segundo:.??

.btn { 
     background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png); 
    }

aún no funcionaba :(¿Hay alguna manera de hacer realidad este Con la adición de una etiqueta <img> en el <button>

Fuente

2010-08-24 omnix

Por cierto, nada prefijado -webkit no es técnicamente CSS3, sino más bien un Apple "estándar" que se solo funcionará en Safari y Chrome. Esto muestra los otros métodos para obtener un degradado en todos los navegadores: http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ – soutarm

Sí, lo sé, Yo uso -moz- es decir, filtro, pero esto fue solo una copia rápida para el ejemplo ... – omnix

Eche un vistazo a esta pregunta, posiblemente útil para usted: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – Strelok

única navegadores WebKit permiten múltiples efectos de fondo (CSS3) .. en términos generales se puede tener un gradiente de O y la imagen pero no se puede tener ambas cosas (aún)

que podrían superponer 2 divs Tho y tener la imagen para el más alto sea PNG transparente o tal

Fuente

2010-08-24 05:17:35

como y luego en css tenemos el fondo con un png y un botón con los degradados? ¿Funcionaría eso? – omnix

sí o solo

- css puede em em all work .. –

Debe usar su primer ejemplo, pero invierta las líneas para que la imagen se aplique antes del degradado. Todos los navegadores obtendrán una imagen de fondo, pero solo los navegadores que entienden -webkit-gradient usarán el degradado. Todos los demás lo ignorarán

Fuente

2010-08-24 05:12:57

Estoy tratando de usar tanto gradiente como imagen en el botón. Esto no funciona .. – omnix

Ah, lo siento. Debería haber leído su pregunta con más cuidado. –

Puedes aplanar tu icono sobre un fondo degradado, lo que significa que solo necesitarás establecer la imagen de fondo. Aparte de eso, creo que vas a tener que poner una etiqueta (o un contenedor con la imagen como fondo) dentro de tu contenedor degradado.

Fuente

2010-08-24 05:16:26 soutarm

Creo que sería mejor y más compatible si simplemente coloca el degradado y el botón juntos en la misma imagen, pero si no es práctico en su situación, puede lograr el mismo efecto usando múltiples divs:

<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));"> 
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>

Asegúrate de cambiar los parámetros de ancho/alto que configuré si usas el mío.

Fuente

2010-08-24 05:28:40 Kranu

Hola a todos :) he estado tratando la máxima transparencia png técnica de capas de gradiente/CSS3 por un tiempo y otro lado de los navegadores esto parece ser más confiable:

background: url (images/bkgd1 .png) centro superior repeat-x, url (images/bkgd2.png) arriba a la derecha repeat-x, -moz-linear-gradient (arriba, # F3F704 0%, #FFFFFF 100%);
background: url (images/bkgd1.png) la parte superior central de repetición-x, url (images/bkgd2.png) arriba a la derecha de repetición-x, webkit-degradado (lineal, superior izquierda, inferior izquierda, color- stop (0%, # F3F704), color-stop (100%, # FFFFFF));

espero que esto ayude a incluso si sólo una persona entonces estaré sonriente durante todo el día de hoy :)

Fuente

2011-04-22 05:59:30

¿Agregar imágenes cuando se usan gradientes de CSS?

Respuesta

Cuestiones relacionadas