html - 三张图片的绝对定位

Question

所以我有一个透明图像，我想将其放置在图像之上以创建“淡出”效果。我还有一张背景图片。所以上面只有三张图片。

这是我的代码

<div class="jumbotron">
div class="hero-dashboard">
    <img class="center-block" src="../../img/hero-dashboard.png">
        <div class="fade-bottom">
        </div>
</div>


CSS
.jumbotron{
        background-image: url('../img/hero-bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
.hero-dashboard img {
                position: absolute;
                z-index: 500;
                height: 30px;
                width: 500px;
            .fade-bottom{
                background-image: url('../img/hero-footer-fade.png');
                position: absolute;
                z-index:10;
                bottom: 70%;
                top: 10%;
                right: 50%;
                width: 100%;
                }
            }
        }

它们都必须在“jumbotron”div 中。它在页面上，但它似乎没有在听定位。谁能帮忙？

Answer 1

1- 当 child 是绝对的并且应该有高度和宽度可见时，父 div (jumbotron) 应该有相对位置。

.jumbotron {
            background-image: url('../img/hero-bg.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            position:relative;
            top:0;
            left:0;
            width: 500px;
            height:30px;
            } // correct this closing tag

    .hero-dashboard img {
                    position: absolute;
                    z-index: 500;
                    height: 30px;
                    width: 500px;
                   } //correct this
    .fade-bottom{
                    background-image: url('../img/hero-footer-fade.png');
                    position: absolute;
                    z-index:10;
                    bottom: 70%;
                    top: 10%;
                    right: 50%;
                    width: 100%;
                    }
            //  } remove this
            //   } remove this

2- 也正确的开始标签 <之前div class="hero-dashboard">

3- 更正您的 css {} 中打开和关闭 tgas 的顺序。它们看起来很奇怪!