我的 div 文本隐藏在英雄图片后面答案

【问题标题】：my div text gets hidden behind hero image我的 div 文本隐藏在英雄图片后面
【发布时间】：2018-11-05 04:48:41
【问题描述】：

const topAppBarElement = document.querySelector('#head');
        const topAppBar = new MDCTopAppBar(topAppBarElement);
        const tabBar = new MDCTabBar(document.querySelector('#list'));
        $(function() {
            $('a[href*=#]').on('click', function(e) {
                e.preventDefault();
                $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
            });
        });

a {
    text-decoration: none !important;
}
.font {
    font-family: "Google Sans" !important;
}
.white{
    --mdc-theme-primary: #ffffff;
    height: 100%;
}
.spacer{
    display:inline-block;
    width:50%;
}
.hero {
    font-size: 3em;
    line-height: 0.1;
    text-align: center;
}
.hero-title {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}
.hero-image {
    background:url(Background.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}
.resize{
    margin-top: 150px;
    height: 100px;
    width:250px;
}
.fab{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    --mdc-theme-secondary: #5f37ee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">`enter code here`
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <header class="mdc-top-app-bar mdc-top-app-bar--short font " id="head">
            <div class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <span class="mdc-top-app-bar__title font">Edufile</span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                    <span class="spacer"></span>
                    <div class="mdc-tab-bar white" role="tablist" id="list">
                        <div class="mdc-tab-scroller" >
                            <div class="mdc-tab-scroller__scroll-area">
                                <div class="mdc-tab-scroller__scroll-content">
                                    <button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
                                        <span class="mdc-tab__content">
                                            <span class="mdc-tab__text-label">Home</span>
                                        </span>
                                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                                            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                        </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                    <button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
                                        <span class="mdc-tab__content">
                                            <span class="mdc-tab__text-label">About Us</span>
                                        </span>
                                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                                            <span class="mdc-tab-indicator__content"></span>
                                        </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                    <button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
                                        <span class="mdc-tab__content">
                                            <span class="mdc-tab__text-label">Login</span>
                                        </span>
                                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                                            <span class="mdc-tab-indicator__content"></span>
                                        </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                    <button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
                                        <span class="mdc-tab__content">
                                            <span class="mdc-tab__text-label">Signup</span>
                                        </span>
                                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                                            <span class="mdc-tab-indicator__content"></span>
                                        </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </header>
        <br><br>
        <section class="hero">
            <div class="hero-image">
                <img src="C:\Users\bhavy\Pictures\Edited\2.png" alt="" class="resize">
                <div class="hero-title">
                    <h2 class ="font">Code Different</h2>
                    <h5 class="font">Code makes you free</h5>
                </div>
            </div>
        </section>
        <a href="#section1"><button class="mdc-fab fab" aria-label="Favorite">
            <span class="mdc-fab__icon material-icons">keyboard_arrow_down</span>
        </button></a>
        <div class="" id="section1">
            <p class="white font">Lorem ipsum dolor sit amet, ne his minim legimus verterem, eos at alterum alienum, mazim munere postea mea no. No option aeterno sed, quas forensibus elaboraret mel ei. Vim tantas euismod detraxit in. Mel libris graecis ei. Ea suas euripidis eos, eos at diam case disputationi, usu dicunt forensibus te. Facer repudiandae est te.

Adipisci voluptaria te mei, his eu vivendum inimicus, ne his quas libris. Sale praesent ex per, mei malis rationibus definitiones cu, ea soluta assentior vim. Cu sed insolens atomorum, et mea fastidii concludaturque. Alia commune his ei, quando everti apeirian pri at, te eos veritus urbanitas. Sumo tincidunt eos at.

Et eos quaestio persecuti, ne affert tacimates disputationi nam, cum justo tincidunt ea. Ad sit doming noluisse laboramus. Cu eum accumsan scaevola, et vix nisl ridens electram. Quo at inermis urbanitas definitiones. Has timeam persius mnesarchum an, ei vis dicit iudico consequat, graecis hendrerit concludaturque sit ea.

Qui ad dolore legimus. Mea ne appetere pertinax, no iuvaret eruditi has, ea dicant libris graeci vel. Id duo unum illud phaedrum, decore eloquentiam duo id. Vim no diam soleat, ex inermis expetendis sea, doctus nusquam fuisset usu an. In integre honestatis usu, mei errem incorrupte suscipiantur at, ut mei affert nonumy eloquentiam. Mel ea simul docendi nominavi.

An iudico mollis corrumpit cum. Temporibus theophrastus ei per, sea iudicabit splendide contentiones cu. Eam ex hinc dolorum, cum at timeam postulant. Vis at nostrum neglegentur, vim et fugit gubergren, instructior reprehendunt pro te. Vel probo habemus neglegentur ex, illud splendide ius id.

Qui et simul nobis aperiri, vel ne case persequeris signiferumque. Est perfecto intellegam signiferumque ad. Elit viris nonumes pro cu. Ad his viris munere, mel ad regione inermis blandit. Verterem indoctum consequat in vim, fuisset placerat eloquentiam vim ne. Sed cu fuisset offendit, saepe facete ei mea.

Pri te wisi delicata percipitur, at scaevola lobortis mea. No mea habeo sadipscing ullamcorper. Ad vel doctus commodo. Vix malis tation contentiones te.

Primis facete cum in, pri vituperata accommodare et. Usu possit consetetur ut. Mentitum intellegebat id sed, id augue offendit appetere quo. Pri quando aeterno laoreet ea, eum alii corpora eu. Id nam hinc vidisse referrentur.</p>
            <a href="section1"></a>
        </div>
        <script type="text/javascript">
        
        </script>
     </body>
 </html>

我的 lorem ipsum 文本隐藏在英雄图像后面。你能告诉我我能做什么吗？

【问题讨论】：

你需要在hero部分设置高度..

标签： html css material-design

【解决方案1】：

如果您想要文本图像上方和之后的文本，您可以在您的 css 中进行一些小的更改，英雄图像将位于文本下方。

请找到以下 css 代码。

.hero-image {top: auto;}

因为你已经设置了 top: 0;图像位于页面顶部，因此文本被隐藏。

另一个答案是，如果您想要图片上方的文字，您可以使用以下 css 代码。

#section1 {    clear: both;
    position: absolute;
    top: auto;
    left: 0;
    z-index: 99;
    color: #fff;}

但我不认为这是你的要求。您可以使用第一个解决方案。

注意：请进一步澄清您的问题，以便我可以给您正确的答案。

谢谢。

【讨论】：