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

Asked

Viewed 800 times

1

I tried to place the gradient in the header that is being the "container" of the images, but it just gets behind the images.

I’ve tried using the z-index but without 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 thanks for the help, But this is exactly what I want to cover up the two images that are in the 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.

essa e imagem que estou seguindo quero usar esse efeito. esse e o cabeçalho que eu fiz não to conseguindo colocar o gradiente pra ficar por cima dessas duas imagens, parece ser apenas uma mas e duas imagens.

css3 css-font-face

  • It would be good for you to include whatever you have of css in the question as well. Got a little confused, you want the image to be behind the gradient of the type Section with a transparency for the image to be appearing underneath eh this?

  • could you add css ? or create a jsfiddle.net and post your code there for us to see

  • Cara made an issue in my reply. I believe that now is more in line with what you intended. If possible put the information you posted in the Answer field here in your question, using the "edit" link just below your original question. If you have any questions with my answer just comment there blz

  • Very top I get thanks to this mega help, put the images as background and funfou straight. Thank you Success. now how do I inform you that this answer was helpful and close this discussion ?

1 answer

2


EDIT

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

You should create a pseudo-element in .container and put him with position:absolute and the z-index bigger than the other elements. So you can put this element on top of others, and not the background of .container father above the elements son who 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 little fuzzy. Because if you put the gradient over the image you will not be able to see the image, because the gradient will be covering up everything that is behind.

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

There are two ways you can simulate this effect if you want to "mix" the image inside the .container as the gradient background which is the background his.

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

NOTE: Different from the opacity that it is only possible to control the intensity of the opacity varying from 0.1 to 1, the mix-blend-mode does not have as good support of browsers yet, but has several merge options as you can see here https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all

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

Browser other questions tagged css3 css-font-face

You are not signed in. Login or sign up in order to post.