Grandiet css oraz obrazki

Question

Chciałem zrobić obrazek który jest pod grandietem oraz jakiś przycisk oraz coś napisane na tym grandiecie ale nie wiem jak to zrobić ponieważ ten obrazek po dodaniu nie chce wejść pod grandiet obrazek:

Answer 1

Możesz użyć kombinacji z-index i background-image. Musisz użyć background lub backgorund-image, bo obrazek nie wejdzie pod gradient, których przecież jest tylko tłem. Oto przykładowy kod:

<!DOCTYPE html>
<html>
<head>
    
    <style>
        .img { background: url('https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg'); height: 220px; width: 330px; z-index: -1;}
        .gradient { 
            background: linear-gradient(137deg, rgba(95,181,221,1) 0%, rgba(228,125,226,1) 40%, rgba(228,79,128,1) 65%, rgba(255,84,19,1) 100%);
            color: #fff;
            margin-top: -8em;
        }
    </style>
    
</head>
<body>
    
    <div class="img"></div>
    <div class="gradient">
        <h1>Tu może być twój przycisk lub coś.</h1>
    </div>
    
</body>
</html>

 

Comments

Odznaczysz jako najlepsza, jak pomogło?