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

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

Múltiples fondos!

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

Si también desea establecer una posición de fondo para su imagen, entonces 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 LESS (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 para darse cuenta es que la primera imagen de fondo definida es la más alta en la stack. La última imagen definida será la más inferior. Eso significa que para tener un degradado 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); } 

simplemente puedes escribir:

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

Tuve una implementación en la que necesitaba llevar esta técnica un paso más allá, y quería esbozar mi trabajo. El código siguiente 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 de navegador cruzado, y ahora todo lo que tengo que declarar es la posición del sprite por botón. Es fácil ampliar este principio para los botones activos y estados de vuelo estacionario.

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

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

  1. Si coloca la URL de la imagen antes del degradado, esta imagen se mostrará sobre el degradado 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; } 
 

Hice un ejemplo con enjoycss

enter image description here

http://enjoycss.com/5q#background

en el editor de gocec puede combinar cualquier cantidad de fondos, lineal, repetitivo lineal, radial, repetitivo radial, imágenes, colores

usted ajusta sus fondos con GUI y automáticamente genera el código

el código está aquí http://enjoycss.com/5q/code/0/background#background

Intentaba hacer lo mismo. Mientras que 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 la imagen de fondo.

Por lo que puedo decir, border-image parece tener un soporte más amplio que múltiples fondos, entonces tal vez 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 que funciona aquí -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Aquí hay un MIXIN que creé para manejar todo lo que la gente podría querer 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 encuentren útil esto.

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

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

Como método seguro, puede hacer una imagen de fondo que sea, por ejemplo, 500×5 píxeles, en su uso de css :

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

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

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

Si tiene que obtener degradados e imágenes de fondo trabajando juntos en IE 9 (HTML 5 y HTML 4.01 Strict), agregue la siguiente statement 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 usa 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 violín . También observe que cuando mira el violín, el degradado 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 al usar 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 el botón de compás con la imagen de fondo, combinación de degradado 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 lindo construir tu trabajo de 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 degradado 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 responsivo, mi drop-box down-arrow en el lado derecho de la caja (acordeón vertical), acepta porcentaje como posición. Inicialmente, la flecha hacia abajo era “posición: absoluta; derecha: 13px;”. Con el 97% de posicionamiento funcionó como el encanto 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%);
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

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

Si desea que las imágenes se fusionen por completo cuando no parezca que los elementos se cargan 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 la imagen / textura png transparente de 32 bits pretratada a la cadena base64 primero y úsela 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 estándar rgba transparencia / gradiente lineal css. Funciona mejor que la creación de capas de arte múltiple y el desperdicio de las solicitudes HTTP, lo que es malo para los dispositivos móviles.

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