Question

我有这个HTML： demo

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

使用这个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));
}

我希望渐变div在图像上重叠，它们明显地在它们之间盘旋。我试过调整z索引，位置和显示，我似乎找不到办法。它们总是出现在图像下面。

Answer 1

* 现在定义 img z-index 属性 *

就像这样

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

<强> Demo

有关 z-index

的更多信息

Answer 2

z-index不适用于具有position：static（默认值）的元素。如果你给img一些定位，那么z-index应该可以工作。

Answer 3

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

CSS在图像元素上显示div背景

3 个答案: