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


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


1063
2018-03-23 22:30


origen


Respuestas:


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 las imágenes solo IE <9 a continuación.

  • La línea 1 establece un color de fondo plano.
  • La línea 2 establece el retorno 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. Ver http://caniuse.com/#feat=css-gradients para soporte de navegador Para obtener una buena publicación sobre por qué no necesita múltiples prefijos de navegador, consulte http://codepen.io/thebabydino/full/pjxVWp/

Layer Stack

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 degradado.

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

Solo apilamiento de imágenes (no hay gradientes en la declaración) Para IE <9

IE9 y superior pueden apilar imágenes de esta misma manera. Podrías 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 respaldo y no mostrará ninguna imagen. Esto no ocurre cuando se incluye un gradiente. Para usar una sola imagen alternativa en este caso, sugiero usar la maravillosa imagen de Paul Irish Elemento HTML condicional 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 degradado. background-size: 40px; restringirá tanto la imagen como el degradado a 40px de alto y ancho. Sin embargo usando background-size: 40px, cover; hará que la imagen sea 40px y el degradado cubrirá el elemento. Para aplicar solo una configuración a una imagen, configure la predeterminada para la otra: background-position: 50%, 0 0; o por navegadores que lo soportan utilizar initial: background-position: 50%, initial;

También puede utilizar la taquigrafía de fondo, sin embargo, esto elimina el color e imagen de respaldo.

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

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


1327
2018-03-30 16:59



Si también quieres establecer posición de fondo para su imagen, que 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
    }
}

75
2017-11-24 16:02



Una cosa para darse cuenta es que la primera imagen de fondo definida es la más alta en la pila. 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);
  }

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


39
2017-12-31 23:51



simplemente puedes escribir:

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


16
2017-12-21 18:35



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.


13
2017-10-10 17:08



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

13
2018-03-15 12:39



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

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

.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 ya que tenemos múltiples imágenes de fondo como se describe aquí


8
2017-10-04 07:21



Hice un ejemplo con enjoycss

enter image description here

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

en el editor de enjoycss puedes 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


5
2018-01-12 15:24



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


2
2018-02-06 04:20



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.


2
2017-12-11 10:33