将部分放置在标题图像的顶部

Question

我对该部分的代码是：

＆＃13;

＆＃13;

Observable.just(new Object())
            .doOnNext(o -> { /* /* This method catches the on next but doesn't consume it. */})
            .doOnComplete(() -> { /* test */})
            .doOnError(throwable -> {/* This method catches the error but doesn't consume it. */})
            .subscribe(
                    new DefaultObserver<Object>() {
                        @Override
                        public void onNext(Object o) {

                        }

                        @Override
                        public void onError(Throwable e) {
                          // here error will be consumed at the end
                        }

                        @Override
                        public void onComplete() {

                        }
                    }
            );

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/football.jpeg);
  background-size: cover;
  background-position: center;
  height: 100vh;
}

navbar {
  text-align: center;
  display: block;
  position: relative;
}


/* Add a black background colour to the top navigation */

.topnav {
  overflow: hidden;
  height: auto;
}


/* Style the links inside the navigation bar */

.topnav a:link,
.topnav a:visited {
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  color: white;
  display: inline-block;
  margin: 20px;
  padding: 10px 0;
  letter-spacing: 1px;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  transition: border-bottom 0.2s;
  word-spacing: 7px;
}


/* Change the color of links on hover */

.topnav a:hover,
.topnav a.active {
  border-bottom: 2px solid #e67e22;
}

section {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

＆＃13;

＆＃13;

我正在尝试放置我的div文本＆＃34; DJs足球池......＆＃34; （位于部分标签之间）在我的标题图像上。然而，我的部分似乎只是靠近我的标题的底部而不是它。我尝试过很多东西，但无济于事。我该怎么做才能解决这个问题？

期望的结果（忽略粘滞便笺）：

Answer 1

Here an example of text over image全屏查看（在摘录中）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fff;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg");
    background-size: cover;
    background-position: center;
    height: 100vh;
}

navbar {
  text-align: center;
    display: block;
    position: relative;

}

/* Add a black background colour to the top navigation */
.topnav {
    overflow: hidden;
    height: auto;
}

/* Style the links inside the navigation bar */
.topnav a:link, 
.topnav a:visited {
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    color: white;
    display: inline-block;
    margin: 20px;
    padding: 10px 0;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    transition: border-bottom 0.2s;
    word-spacing: 7px;
}

/* Change the color of links on hover */
.topnav a:hover, 
.topnav a.active {
border-bottom: 2px solid #e67e22;
}



.centered { /*ADDED CSS*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<header>
        <navbar>
            <div class="topnav">
                <a class="active" href="#home">Home</a>
                <a href="#rules">Rules</a>
                <a href="#predictions">Predictions</a>
                <a href="#results">Results</a>
                <a href="#standings">Standings</a>
                <a href="#previous">Previous&nbsp;Winners</a>
            </div>
        </navbar>
    </header>

    <section>
        <div class="row centered">
            <h1>DJ's English Premier League Football Pool</h1>
            <p>The only website you'll need to make predictions, view fixtures and more for our football pool!</p>
        </div>
    </section>