2

Estoy añadiendo un estilo css a un sidebar generado por W3.CSS, sin embargo al realizar el codigo que muestro mas a bajo, todo el sidebar y su contenido se vuelve mas opaco y a final de cuentas no sucede lo que deseo, q es que la imagen de fondo obtenga como un filtro del color azul que deseo, entiendase que, la imagen cambie de color o que se funda con el color degradado: la imagen de fondo con el color degradado por encima pero que se vea la imagen. trate de colocar algo parecido a esto

div.gr {
    background:url(assets/img/sidebar-6.jpg);
    
}
div.opacity{
    background-image:linear-gradient(to bottom, #33ccff 25%, #0033cc 100%), url(assets/img/sidebar-6.jpg)  ; 
    
}
<div class=" gr w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:280px;right:100;" id="mySidebar">
        <button class=" w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
        
           <div class="container">
              <div class="col">
              &nbsp;
              <div class="row">
            
                  <a class=" w3-hover-grayscale mx-auto d-block" href="http://globalr.net/site/"><img  src="assets/img/GR.png" width="130" height="50" ></a>
               
              </div>
              &nbsp;
              <div class="row ">
                <div class="col ">
                    <a href="#GENERAR" data-toggle="collapse">
                      <button type="button" class="btn btn-default j " ><img src="assets/img/menu1.png" width="20" height="20" > Herramientas de Gestion </button>
                    </a>

                    <div id="GENERAR" class="collapse">
                        <div class="btn-group-vertical btn-group-lg">
                            <button type="button" class="btn btn-default j">Crear Proyecto</button>
                            <button type="button" class="btn btn-default j">Modificar Proyecto</button>
                            <button type="button" class="btn btn-default j">Eliminar Proyecto</button>
                          </div>
                    </div>
                </div>  
              </div>
            </div>
          </div>    
      
      </div> 
  

1
  • Seria útil que añadieras un html mínimo que nos permita ver el elemento además de poner la imagen en como url para poder visualizar realmente tu caso. el 22 ago. 2018 a las 12:56

4 respuestas 4

0

Aparte del background-blend-mode puedes utilizar un after:: con degradado

body {
  font-family: sans-serif;
}

.fondo {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  min-height: 500px; 
  background-image: url(https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_960_720.jpg);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1; 
}

.fondo.con::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right top, #05193799, #004d7a99, #00879399, #00bf7299, #a8eb1299);
  z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
  <title>Degradado sobre imagen</title>
</head>
<body>
  <p>Sin degradado</p>
  <div class="fondo"></div>
  <p>Con degradado</p>
	<div class="fondo con"></div>
</body>
</html>

0

Cuando tienes imágenes que no son transparentes o que con solo la transparencia no se puede dar el efecto deseado la propiedad "background-blend-mode" resulta sumamente útil, la cual define la forma en que se combinan el color de frente y el color de fondo. Para un ejemplo, tomemos el siguiente elemento:

    .caja {
      width: 100vw;
      height: 100vh;

      background-size: 100%;
      background-color: Yellow;
      background-image:
          url(https://i.imgur.com/xgX5Wiv.jpg);
      
    }
<div class="caja"></div>

Los estilos de dicha caja definen tanto una imagen como un color amarillo de fondo. Sin embargo, dato que la imagen no es transparente, el fondo amarillo no se verá. Ahora apliquemos la propiedad antes mentada con el valor "multiply":

    .caja {
      width: 100vw;
      height: 100vh;

      background-size: 100%;
      background-color: Yellow;
      background-image:
          url(https://i.imgur.com/xgX5Wiv.jpg);
      background-blend-mode: multiply;
    }
<div class="caja"></div>

2
  • Hola muy buenas, muchas gracias por la respuesta, esto me puede funcionar, no obstante, me gustaria saber si de alguna fomar puedo utilizar el linear-gradient para que el color no solo sea plano sino en degradado... es posible? el 22 ago. 2018 a las 14:37
  • Claro, blend-mode funciona con cualquier fondo e incluso con los colores de los elementos que estén por debajo y que tengan colores diferentes. Te lo mostraría pero parece que la respuesta de Edgar ya cubrió esa parte. Por cierto, no olvides marcar la respuesta como útil si te sirvió, aunque solo pueda haber una respuesta aceptada puedes marcar varias con flechita arriba. el 22 ago. 2018 a las 19:51
0

La propiedad background-image soporta múltiples imágenes separadas por coma (,), y como tal la función linear-gradient() genera una imagen: mira estos ejemplos

html,body {
  background:#ddd;
}
#div1 {
  width:200px;
  height:200px;
  background-image:url(http://informaticasaz.com/wp-content/uploads/2016/12/PORTATIL.png), repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)
}
#div2 {
  width:200px;
  height:200px;
  background-image:url(http://informaticasaz.com/wp-content/uploads/2016/12/PORTATIL.png), radial-gradient(farthest-corner at 50% 50%, yellow, green);
}


#div3 {
  width:200px;
  height:200px;
  background-image:url(http://informaticasaz.com/wp-content/uploads/2016/12/PORTATIL.png), linear-gradient(to bottom, yellow 0%, blue 100%);
}
<div  id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

0

Solo mezcla las dos respuestas anteriores, lograras, algo como esto:

*{box-sizing: border-box; margin: 0; padding: 0;}

.caja {
      width: 100vw;
      height: 100vh;

      background-size: 100%;
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          linear-gradient(
            to bottom,
            white,
            orange
          );
      background-size: cover;
      background-blend-mode: multiply;
    }
    
.caja:nth-child(2){
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          linear-gradient(
            to bottom,
            crimson,
            blue
          );
          background-attachment: fixed;
}
    
.caja:nth-child(3){
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          linear-gradient(
            to bottom,
            yellow,
            white
          );
}
    
.caja:nth-child(4){
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          linear-gradient(
            to bottom,
            crimson,
            pink
          );
      background-attachment: fixed;
}
    
.caja:nth-child(5){
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          linear-gradient(
            to bottom,
            crimson,
            orange
          );
      background-blend-mode: screen;
}
    
.caja:nth-child(6){
      background-image:
          url(http://picsum.photos/1200/600/?=1030),
          repeating-radial-gradient(
            lime, 
            white 33%
            );
      background-attachment: fixed;
}
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

Ahora para aportar más, te aconsejaría mezclarlo con variables css y simplificar todo más fácil, algo así:

.caja{
  --img: url();
  --grad: linear-gradiant(to bottom, red, yellow);
  background-image: var(--img), var(--grad);
}

Mira como quedaría el mismo demo, pero con variables:

*{box-sizing: border-box; margin: 0; padding: 0;}

.caja {
      --img: url(http://picsum.photos/1200/600?image=1044);
      --grad01: linear-gradient( to bottom, white, orange );
      --grad02: linear-gradient( to bottom, crimson, blue );
      --grad03: linear-gradient( to bottom, yellow, white );
      --grad04: linear-gradient( to bottom, crimson, pink );
      --grad05: linear-gradient( to bottom, crimson, orange );
      --grad06: repeating-radial-gradient( lime,  white 33% );
      
      width: 100vw;
      height: 100vh;
      background-size: 100%;
      background-image:
          var(--img),
          var(--grad01);
      background-size: cover;
      background-blend-mode: multiply;
    }
    
.caja:nth-child(2){
      --grad01: var(--grad02);
      background-attachment: fixed;
}
    
.caja:nth-child(3){
      --grad01: var(--grad03);          
}
    
.caja:nth-child(4){
      --grad01: var(--grad04); 
      background-attachment: fixed;
}
    
.caja:nth-child(5){
      --grad01: var(--grad05);
      background-blend-mode: screen;
}
    
.caja:nth-child(6){
      --grad01: var(--grad06);
      background-attachment: fixed;
}

@media (min-width:1080px){
  .caja{
    --img: url(http://picsum.photos/2400/1200?image=1044);
  }
}
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.