efectos - fondo degradado transparente css




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

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.

¿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?


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.


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.


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.


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


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

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}[email protected]{version}"); // fallback
    background: url("@{img-folder}/@{imageName}[email protected]{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}[email protected]{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);
}

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.


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.


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


usted podría simplemente escribir:

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





gradient