¿Cómo combino una imagen de fondo y un gradiente CSS3 en el mismo elemento?

1251

¿Cómo uso los gradientes CSS3 para mi background-colory luego aplico a background-imagepara aplicar algún tipo de textura transparente clara?

Ronald
fuente
99
nota: también puede colocar la imagen de fondo (centro de 15px) o establecer su propiedad 'repetir' de esta manera (ejemplo funciona para Firefox 3.6+) .some-class {background: url ("../ icon.png") no- repetir 15px center, -moz-linear-gradient (center top, #FFFFFF, #DDDDDD);}
Julien Bérubé
SVG o SVG + CSS se pueden usar para crear texturas planas (ruido) o gradientes texturizados, respectivamente.
Clint Pachl

Respuestas:

1544

Múltiples fondos!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Estas 2 líneas son la alternativa para cualquier navegador que no haga gradientes. Consulte las notas para apilar imágenes solo IE <9 a continuación.

  • La línea 1 establece un color de fondo plano.
  • La línea 2 establece el respaldo de la imagen de fondo.

La línea final establece una imagen de fondo y un degradado para los navegadores que pueden manejarlos.

  • La línea 3 es para todos los navegadores relativamente modernos.

Casi todos los navegadores actuales tienen soporte para múltiples imágenes de fondo y fondos CSS. Consulte http://caniuse.com/#feat=css-gradients para obtener asistencia sobre el navegador. Para una buena publicación sobre por qué no necesita múltiples prefijos del navegador, consulte http://codepen.io/thebabydino/full/pjxVWp/

Pila de capas

Cabe señalar que la primera imagen definida estará en la parte superior de la pila. En este caso, la imagen está en la parte SUPERIOR del gradiente.

Para obtener más información sobre las capas de fondo, consulte http://www.w3.org/TR/css3-background/#layering .

SOLAMENTE imágenes apiladas (sin gradientes en la declaración) Para IE <9

IE9 y versiones posteriores pueden apilar imágenes de la misma manera. Podría usar esto para crear una imagen de degradado para ie9, aunque personalmente, no lo haría. Sin embargo, debe tenerse en cuenta cuando se usan solo imágenes, es decir, <9 ignorará la declaración de reserva y no mostrará ninguna imagen. Esto no sucede cuando se incluye un gradiente. Para usar una sola imagen de reserva en este caso, sugiero usar el maravilloso elemento HTML condicional de Paul Irish junto con su código de reserva:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Posición de fondo, tamaño, etc.

Otras propiedades que se aplicarían a una sola imagen también pueden estar separadas por comas. Si solo se proporciona 1 valor, se aplicará a todas las imágenes apiladas, incluido el gradiente. background-size: 40px;restringirá tanto la imagen como el gradiente a 40px de alto y ancho. Sin embargo, el uso background-size: 40px, cover;hará que la imagen sea de 40 px y el gradiente cubrirá el elemento. Para aplicar solo una configuración a una imagen, configure el valor predeterminado para la otra: background-position: 50%, 0 0;o para los navegadores que lo admitan, use initial:background-position: 50%, initial;

También puede usar la taquigrafía de fondo, sin embargo, esto elimina el color y la imagen de reserva.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Lo mismo se aplica a la posición de fondo, la repetición de fondo, etc.

Gidgidonihah
fuente
36
Gracias por su respuesta, ¿alguna idea de cómo controlar background-positionsolo la imagen y no el gradiente?
adardesign
44
Gracias por esto, excelente información. El | @adardesign: use la taquigrafía de fondo. Modificando el ejemplo anterior, sería: background: url (IMAGE_URL) sin repetición izquierda arriba, [gradiente apropiado];
RussellUresti
14
@adardesign: background: url ("../ images / icon.png") centro de 15px sin repetición, -moz-linear-gradient (centro superior, #FFFFFF, #DDDDDD); / * aviso 15px center, agregará un relleno izquierdo de 15 píxeles y alinear verticalmente en el centro el ícono.png * /
Julien Bérubé
2
en cromo al menos puedes controlar la posición de fondo para múltiples imágenes usando coma para separar valores ... como este ... posición de fondo: 0px 8px, 0px 0px ...
Orlando
1
Probablemente también valga la pena señalar que si necesita estipular el posicionamiento de otros atributos de la imagen, puede usar las propiedades css de fondo más adelante en la regla css. Por ejemplo: repetición de fondo: no repetición; posición de fondo: centro; tamaño de fondo: 1300px 1303px;
Phill Healey
86

Si también desea establecer la posición de fondo para su imagen, puede usar esto:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

o también puedes crear un MENOS mixin (estilo bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}
Tamás Pap
fuente
El único en esta página que funcionó para mí. Sin embargo, lo usé con CSS normal. Todos los demás que probé en realidad estaban ocultando la imagen con el color degradado superpuesto.
Ska
@Ska: simplemente invierte el orden y el índice z funciona al revés. Ver stackoverflow.com/questions/14915542/… .
Frank Conijn
46

Una cosa a tener en cuenta es que la primera imagen de fondo definida está en la parte superior de la pila. La última imagen definida será la más inferior. Eso significa que, para tener un gradiente de fondo detrás de una imagen, necesitarías:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

También puede definir posiciones de fondo y tamaño de fondo para las imágenes. Recopilé una publicación de blog sobre algunas cosas interesantes que puedes hacer con los gradientes CSS3

Robert
fuente
2
La respuesta sería aún mejor, cuando la notación de estándares W3C llega al final.
Volker E.
44
Este código no parece funcionar correctamente. solo podemos ver la imagen stackOverflow, no la imagen de fondo detrás / antes.
O A.
Creo que -webkit-gradient podría estar en desuso stackoverflow.com/questions/10683364/…
alpalalpal
Es posible que el código no funcione, pero este es un punto muy importante. Puede reordenar cómo funcionan los elementos de fondo, pero debe pensar en ellos en capas. Si desea el gradiente en la parte superior de la imagen, póngalo primero y probablemente quiera usar RGBa para que pueda ver la imagen detrás:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
serraosays
34

simplemente puedes escribir:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Nejmeddine Jammeli
fuente
1
Esta fue la única solución que funcionó para mí (Firefox v57). El linear-gradient()tenía que venir antes que el url(), y la transparencia parcial tenía que usarse para los colores degradados, usando rgba(). Cualquier otra cosa simplemente usó la primera definición de la lista (como si la segunda fuera una alternativa, similar a cómo font-familyfuncionan las declaraciones).
waldyrious
@waldyrious tenga en cuenta que el usuario quiere aplicar una especie de textura transparente clara sobre el gradiente lineal, por lo que la imagen debe ser lo primero porque debe representarse sobre el gradiente
Alex Guerrero
La composición de una imagen y un degradado mediante semitransparencia debería tener el mismo efecto, independientemente de cuál esté delante. Sin embargo, siempre puede definir sus gradientes para que tengan algo de transparencia, pero las imágenes que aún no son semitransparentes no se pueden convertir de manera fácil / dinámica para usarlas de esta manera. Es por eso que el enfoque de poner el gradiente primero es más útil en general.
waldyrious
21

Siempre uso el siguiente código para que funcione. Hay algunas notas:

  1. Si coloca la URL de la imagen antes del gradiente, esta imagen se mostrará sobre el gradiente como se esperaba.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Si coloca un degradado antes de la URL de la imagen, esta imagen se mostrará debajo del degradado.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Esta técnica es la misma que tenemos múltiples imágenes de fondo como se describe aquí

trungk18
fuente
¡Excelente! Pongo en negrita esto -> Si coloca un gradiente antes de la URL de la imagen, esta imagen se mostrará debajo del gradiente.
aldyahsn
20

mi solución:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);
Francesco Borzi
fuente
3
Esta solución funciona en mi caso para tener espectáculos de gradiente en la parte superior de la imagen, de lo contrario, estará oculta por la imagen.
vizFlux
15

Tuve una implementación donde necesitaba llevar esta técnica un paso más allá, y quería esbozar mi trabajo. El siguiente código hace lo mismo pero usa SASS, Bourbon y un sprite de imagen.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS y Bourbon se encargan del código del navegador cruzado, y ahora todo lo que tengo que declarar es la posición del sprite por botón. Es fácil extender este principio para los botones activos y estados de desplazamiento.

bolas centrales
fuente
5

Si tiene errores extraños al descargar imágenes de fondo, use el comprobador de enlaces W3C: https://validator.w3.org/checklink

Aquí hay mixins modernos que uso (créditos: PSA: no use generadores de gradiente ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}
Mateusz
fuente
4

Aquí hay un MIXIN que creé para manejar todo lo que a la gente le gustaría usar:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Esto se puede usar así:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Espero que les sea útil.

Gracias a @Gidgidonihah por encontrar la solución inicial.

lukehillonline
fuente
3

Estaba tratando de hacer lo mismo. Si bien el color de fondo y la imagen de fondo existen en capas separadas dentro de un objeto, lo que significa que pueden coexistir, los gradientes CSS parecen cooptar la capa de imagen de fondo.

Por lo que puedo decir, la imagen de borde parece tener un soporte más amplio que múltiples fondos, por lo que tal vez sea un enfoque alternativo.

http://articles.sitepoint.com/article/css3-border-images

ACTUALIZACIÓN: Un poco más de investigación. Parece que Petra Gregorova tiene algo trabajando aquí -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Alex
fuente
2

Podrías usar múltiples antecedentes: linear-gradient (); llamadas, pero prueba esto:

Si desea que las imágenes se fusionen por completo donde no parece que los elementos se carguen por separado debido a solicitudes HTTP separadas, utilice esta técnica. Aquí estamos cargando dos cosas en el mismo elemento que se cargan simultáneamente ...

Solo asegúrese de convertir su imagen / textura transparente transparente de 32 bits previamente renderizada a una cadena base64 primero y úsela dentro de la llamada css de imagen de fondo (en lugar de INSERTIMAGEBLOBHERE en este ejemplo).

Utilicé esta técnica para fusionar una textura de aspecto de oblea y otros datos de imagen que se serializan con una regla estándar de transparencia rgba / gradiente lineal css. Funciona mejor que superponer varias imágenes y desperdiciar solicitudes HTTP, lo cual es malo para dispositivos móviles. Todo se carga del lado del cliente sin necesidad de operación de archivo, pero aumenta el tamaño del byte del documento.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }
Paul Latour
fuente
0

Si tiene que hacer que los gradientes y las imágenes de fondo trabajen juntos en IE 9 (HTML 5 y HTML 4.01 Strict), agregue la siguiente declaración de atributo a su clase css y debería funcionar:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Observe que usa el filteratributo y que hay dos instancias progid:[val]separadas por una coma antes de cerrar el valor del atributo con un punto y coma. Aquí está el violín . También observe que cuando mira el violín, el gradiente se extiende más allá de las esquinas redondeadas. No tengo una solución para ese otro que no usa esquinas redondeadas. También tenga en cuenta que cuando se utiliza una ruta relativa en el atributo src [IMAGE_URL], la ruta es relativa a la página del documento y no al archivo css (Ver fuente ).

Este artículo ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) es lo que me llevó a esta solución. Es bastante útil para CSS3 específico de IE.

KSev
fuente
0

Quería hacer un botón span con imagen de fondo, combinación de gradiente de fondo.

http://enjoycss.com/ me ayudó a hacer mi tarea de trabajo. Solo tengo que eliminar algunos CSS adicionales generados automáticamente. Pero es realmente un buen sitio construir su trabajo desde cero.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}
Chatura Dinesh Halwatura
fuente
0

Resuelvo el problema de esa manera. Defino Gradiente en HTML e imagen de fondo en el Cuerpo

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

vander2000
fuente
0

Para mi diseño receptivo, mi flecha desplegable del cuadro desplegable en el lado derecho del cuadro (acordeón vertical), aceptó el porcentaje como posición. Inicialmente, la flecha hacia abajo era "posición: absoluta; derecha: 13px;". Con el 97% de posicionamiento funcionó de la siguiente manera:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PD: Lo siento, no sé cómo manejar los filtros.

Mugé
fuente
-1

Como método seguro, puede hacer una imagen de fondo de 500x5 píxeles, en su cssuso:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Donde xxxxxxcorresponde con el color que coincide con el color degradado final.

También puede arreglar esto en la parte inferior de la pantalla y hacer que coincida con el color del degradado inicial.

Epicus
fuente
1
-1 porque: Por un lado, "background-img" no es una regla CSS válida. Por otro lado, esto en realidad no responde la pregunta.
Chris Browne