How to place a gradient color on an image

Question

How to place a gradient color on an image

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I am adding a css style to a sidebar generated by W3.CSS, however, when doing the code that I show more to low, all the sidebar and its content becomes more opaque and at the end of what does not happen what I want, is that the background image get as a blue color filter that I want, understand that the image changes color or that it melts with the color gradient: the background image with the color gradient above but the image is visible. try to put something like this

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>

html5 html css3 css angular

asked by Jesus Cabrita 22.08.2018 в 13:54

source

4 answers

0

When you have images that are not transparent or that only the transparency can not give the desired effect, the "background-blend-mode" property is extremely useful, which defines the way in which the color of the front and the the background color. For an example, let's take the following element:

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

      background-size: 100%;
      background-color: Yellow;
      background-image:
          url(https://i.imgur.com/xgX5Wiv.jpg);
      
    }

<div class="caja"></div>

The box styles define both an image and a yellow background color. However, since the image is not transparent, the yellow background will not be seen. Now let's apply the property mentioned above with the value "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>

answered by 22.08.2018 в 15:30

0

The background-image property supports multiple images separated by a comma (,), and as such the linear-gradient () function generates an image: look at these examples

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>

answered by 22.08.2018 в 15:15

0

Just mix the two previous answers, you will achieve something like this:

*{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>

Now to contribute more, I would advise you to mix it with css variables and simplify everything easier, something like this:

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

See how the same demo would look, but with 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>

answered by 22.08.2018 в 19:11

Problems installing Grails How to send a data from a child component to a parent in vue.js?

score 0 · Accepted Answer

Apart from the background-blend-mode you can use a after :: with a gradient

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>