html - Bootstrap hero-unit 没有出现在网络上，可能是 z-index 错误

Question

我有一个图像，其中包含 Bootstrap 英雄单元中的三个按钮。显示了我的封面照片，但没有显示英雄单位本身。

这是我的 HTML:

    <div>
    <header class="hero-unit">
          <div class="hero-content-outer">
            <div class="hero-content">
                <div class="hero-logo">
                    <img alt="Genius Ghost Logo" src="img/hero-logo.png">
                </div>
                <div class="hero-divider"></div>
                <h1>Strategic<br />digital, print,<br />and products</h1>
                <div class="hero-divider"></div>
                <div class="hero-button">
                    <ul>
                    <li><a class="home-about" href="#about">About Us</a></li>
                    <li><a class="home-work" href="#work">Our Work</a></li>
                    <li><a class="home-contact" href="#contact">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </header>

    <div id="nav-spacer">
    </div>  
</div>

这是我的 CSS:

                    .hero-unit {
            background-image: url('../img/splash-img.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;
            position: relative;
            padding: 0;
            margin-bottom: 0;
            text-align: center;
            height: 1000px;
        }
        .hero-content-outer{
            opacity: 0;
            position: relative;
            z-index: 50;

        }           
        .hero-unit h1 {
            font-family: 'knockout';
            font-weight: normal;
            text-transform: uppercase;
            text-align: center;
            color: #fff;
            margin-top: 25px;
            margin-bottom: 35px;
            line-height: 1.05em;
            position: relative;
            z-index: 50;
            font-size: 54px;
        }

        .hero-button {
            margin-top: 25px;
            z-index: 50;
            position: relative;
        }
        .hero-unit ul {
                padding: 0;
                margin: 0;
        }
        .hero-unit ul li {
                list-style-type: none;
                display: inline;
                padding: 0 15px;
        }

        .hero-button a {
            padding: 10px 50px;
            color: #282445;
            border:solid 1px #282445;
            background-color:#fff;
            text-align: center;
            font-family: 'Droid Sans', sans-serif;
            font-style: normal;
            font-size: 16px;
            font-weight: normal;
            transition: background .25s ease-in-out;
                       -moz-transition: background .25s ease-in-out;
                       -webkit-transition: background .25s ease-in-out;
        }

        .hero-button a.home-about:active {
            box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -moz-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -webkit-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            background-color: #81ccdd;
            opacity: 1;
            text-decoration: none;
        }

        .hero-button a.home-work:active {
            box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -moz-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -webkit-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            background-color: #81ccdd;
            opacity: 1;
            text-decoration: none;
        }

        .hero-button a.home-contact:active {
            box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -moz-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            -webkit-box-shadow: inset 0px 2px 2px rgba(90, 90, 90, 0.5);
            background-color: rgb(80,125,150);
            opacity: 1;
            text-decoration: none;
        }
        .hero-button a:hover {
            text-decoration: none;
            color: #fff;
            bacgrounnd-color:#282445;
        }
        .hero-button a:focus {
            text-decoration: none;
        }

        .hero-divider{
            width: 475px;
            height: 1px;
            margin: auto;
            /*background-color: rgb(143,127,16);*/  
        }

        .hero-unit:after {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            display: inline;
            width: 100%;
            height: 100%;
        }

        .hero-logo {
            width: 171px;
            margin: auto;
            padding: 0 0 25px 0;
        }                            

                    .hero-unit h1 {
                    text-transform: uppercase;
                    font-size: 24px;
                    text-align: center;
                    color: #ffffff;
                    padding-left: 25px;
                    padding-right: 25px;
                    line-height: 1.05em;
                    position: relative;
                    z-index: 50;
                    margin: 0;
                }

                .hero-button {
                    margin-top: 10px;
                }

                .hero-unit ul li {
                    list-style-type: none;
                    height: 32px;
                }

                .hero-divider{
                    width: 200px;
                    margin: 0 auto;
                }

                .hero-logo {
                    width: 75px;
                    margin: auto;
                    padding: 25px 0 25px 0;
                }

也可以在这里找到所有内容:http://www.geniusghost.com/ .我试过操纵 z-index，但找不到它们。帮助。

Answer 1

移除 .hero-content-outer 的 opacity:0