How to put a gradient in front of two images that are background?

Question

How to put a gradient in front of two images that are background?

Navigation

#1 by (2 votes)

1

I tried to put the gradient in the header that is the "container" of the images, but it only gets behind the images.

I've tried using z-index but with no success.

<body>        
    <div class="container">
        <section class="cabecalho">
            <header>
                IMAGEM DE CIMA TA AQUI
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    IMAGEM DE BAIXO 
                </div>
        </section>
    </div>       

</body>

Good morning, thank you for the help, but that's exactly what I want to cover the two images that are as background, but in I will control the gradient so that it is possible to visualize the image. attach 2 images with the example I want to follow, and what I'm doing.

css3 css-font-face

asked by anonymous 16.07.2018 / 03:23

1 answer

How to equally divide the space of the StackPanel between the children How to write to the mongodb API

score 2 · Answer 1

EDIT

According to the information that the questioner added, follows a new answer, more consistent with the doubt.

You must create a pseudo-element in .container and put it with position:absolute and z-index greater than the other elements. So you can put this element on top of the others, not the% with% of the parent% parent elements that are inside.

  .container {
    position: relative;
  }
  .container::after {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, #fff 100%);
  }

    <div class="container">
        <section class="cabecalho">
            <header>
                    <img class="mix" src="http://unsplash.it/110/100"alt="">
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    <img class="opa" src="http://unsplash.it/102/102"alt="">
                </div>
        </section>
    </div>

Your question got a bit confusing. For if you put the gradient over the image you will not be able to see the image, because the gradient will be covering everything that is behind.

Another thing, it is not possible to put the background of the element "parent" which in this case is its background in front of the elements "children" that are within that element .container

There are two ways for you to try to simulate this effect if you want to "mix" the image that is inside .container as the gradient background that is the .container of it.

One way to simulate this is by using .container in the image another shape is with background . In this example, the image above is with mix-blend-mode and the bottom image with opacity to see the behavior of each option.

NOTE: Unlike blend-mode it is possible to only control opacity intensity ranging from 0.1 to 1, opacity does not have so good browser support yet, however there are several merge options as you can see here link

.container {
    background-image: linear-gradient(red, blue);
}
.container .mix  {
    mix-blend-mode: screen;
}
.container .opa {
    opacity: 0.5;
}

    <div class="container">
        <section class="cabecalho">
            <header>
                    <img class="mix" src="http://unsplash.it/110/100"alt="">
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    <img class="opa" src="http://unsplash.it/102/102"alt="">
                </div>
        </section>
    </div>