Question

所以我有一个透明的图像，我想放在一个图像的顶部，以创建一个＆＃34;淡出＆＃34;影响。我也有背景图片。所以这里有三张图片。

这是我的代码

<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%;
                }
            }
        }

他们都必须在＆＃34; jumbotron＆＃34; DIV。它在页面上，但它似乎没有听取定位。有人可以帮忙吗？

Answer 1

1-当孩子是绝对的时，父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的顺序。他们看起来很奇怪！

Answer 2

感谢您的帮助。我关闭了css标签{}，因为我需要它们坐在jumbotron div类中。因为他们是孩子。如果我错了，请纠正我，但我认为这是正确的做法。

三幅图像的绝对定位

2 个答案: