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

fondo degradado html5

Question

¿Cómo utilizo los gradientes CSS3 para mi background-color y luego aplico una background-image para aplicar algún tipo de textura transparente clara?

Answer 1

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 puede ser usado como tal:

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

Espero que ustedes encuentren esto útil.

crédito a @Gidgidonihah por encontrar la solución inicial.

Answer 2

Como método seguro, puedes hacer una imagen de fondo que diga 500x5 píxeles, en tu uso css :

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

Donde xxxxxx corresponde con el color que coincide con el color del degradado final.

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

Answer 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 de 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 los fondos múltiples, así que quizás ese 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

Answer 4

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 el respaldo para cualquier navegador que no haga gradientes. Vea las notas para apilar imágenes solo en IE <9 abajo.

• La línea 1 establece un color de fondo plano.
• La línea 2 establece el retroceso 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 soporte del navegador. Para una buena publicación sobre por qué no necesita varios prefijos de navegador, consulte http://codepen.io/thebabydino/full/pjxVWp/

Pila de capas

Cabe señalar que la primera imagen definida será la más alta en la pila. En este caso, la imagen está en la parte SUPERIOR del gradiente.

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

SOLO para apilar imágenes (sin gradientes en la declaración) para IE <9

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

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

Posición de fondo, dimensionamiento 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 degradado. background-size: 40px; restringirá tanto la imagen como el degradado a 40px de alto y ancho. Sin embargo, utilizando background-size: 40px, cover; hará que la imagen sea de 40px y el degradado 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 compatibles, 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.

Answer 5

Para mi diseño sensible, mi flecha hacia abajo del cuadro desplegable en el lado derecho de la caja (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ó a la perfección 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 Disculpe, no sé cómo manejar los filtros.

Answer 6

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

http://enjoycss.com/ ayudó a hacer mi tarea de trabajo. Sólo tengo que eliminar algunos CSS adicionales generados automáticamente. Pero es realmente agradable construir tu sitio de scratch.

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

Answer 7

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/.jpg");
  height: 100%
}

Answer 8

Si desea que las imágenes se fusionen completamente en un lugar donde no parezca 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 primero la imagen / textura png transparente de 32 bits pre-renderizada a la cadena base64 y usarla dentro de la llamada css de la imagen de fondo. Utilicé esta técnica para fusionar una textura de aspecto de oblea con una regla rgba estándar de transparencia / gradiente lineal css. Funciona mejor que la disposición múltiple de arte y el desperdicio de solicitudes HTTP, lo que es malo para el móvil.

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

Answer 9

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 mixin MENOS (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
    }
}

Answer 10

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

Aquí están los mixins modernos que uso (créditos: http://codepen.io/thebabydino/full/pjxVWp/ ):

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

Answer 11

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 hacer el truco:

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

Observe que utiliza el atributo de filter y que hay dos instancias de progid:[val] separadas por una coma antes de cerrar el valor del atributo con un punto y coma. Aquí está el fiddle . 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 (consulte la source ).

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

Answer 12

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 el 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 varias imágenes de fondo como se describe here

Answer 13

Tenía una implementación en la que necesitaba llevar esta técnica un paso más allá y quería delinear 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 ocupan 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 de estado activo y activo.

Answer 14

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á 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/.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/.jpg"), -moz-linear-gradient(top, red, yellow);
  }

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

Answer 15

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

Answer 16

usted podría simplemente escribir:

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