CSS show div background over image element

StackOverflow https://stackoverflow.com/questions/22497200

문제

I have this HTML: demo

<div class="container">
    <img class="image" src="someUrl">
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>

with this CSS:

.container {
    position:relative;
    width:100%;
    height:100%;
    padding-top:70.5px;
}

.gradientDown {
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
}

.gradientUp {
    position: absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
}

I would like the gradient divs to overlap over the image, which is visibly hovering between them. I've tried tweaking around the z-indexes, positions, and displays, and I can't seem to find a way to do it. They always come out underneath the image.

도움이 되었습니까?

해결책

*Now Define your img z-index property *

as like this 

img{
    position:relative;
    z-index:1;  
}

Demo

More about z-index

다른 팁

z-index doesn't work on elements that have position:static (the default). If you give your img some positioning the z-index should work.

<html>
<head>
    <style>
        div{
            position:  relative;
        }
        .container {
            position:relative;
            width:100%;
            height:100%;
            padding-top:70.5px;
        }

        .gradientDown {
            position:relative;
            margin-top: -300px;
            top:0;
            width:100%;
            height:100px;
            background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
        }

        .gradientUp {
            position: relative;
            bottom:0;
            width:100%;
            height:100px;
            background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
        }
    </style>
</head>
<body>
<div class="container">
    <div><img class="image" src="someurl"></div>
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>
</body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top