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

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

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.

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

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

simplemente puedes escribir:

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

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>

2. 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í

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

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.

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

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.

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

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

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.

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

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

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.

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.