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

Question

我对该部分的代码是：

* {
  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%);
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
  <title> DJ's Footy Pool</title>
</head>

<body>

  <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">
      <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>
</body>

</html>

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

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

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>

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

问题描述投票：-2回答：1

1个回答

最新问题

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

问题描述 投票：-2回答：1

1个回答

最新问题

问题描述投票：-2回答：1