Question

HTML

<body>
  <nav>
    <ul>
      <li><a href="https://codepen.io/AakashL/pen/ZNzyqj">Home</a></li>
      <li><a href="https://codepen.io/AakashL/pen/NVKvWX">Content</a></li>
      <li><a href="https://codepen.io/AakashL/pen/BeBdad">Contact Us</a></li>
    </ul>
  </nav>
  <p>Welcome to Top Imports! This website is created as an informational page which lays out the top and most popular Japanese imports of all time. Mainly of the cars that you will see in the content page will be older cars. All of these cars are iconic Japanese sports cars that are highly saught out for in the United States of America. I hope you enjoy the collection that we have put together. </p>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  height: 100%;
  text-decoration: none;
}

body {

  background-image: url("http://i67.tinypic.com/143dljp.png");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

nav {
  width: 100%;
  height: 50px;
  background-color: white;
}

ul {

}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 50px;

}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  font-family: arial;
  color: grey;
  padding: 0 35px
}

ul li a:hover {
  color: black;
  cursor: pointer;
}

所以我在CSS中设置了背景图片，但是我想在图片下添加文本，我到底要如何在图片下添加文本或内容？

Let's Encrypt

^这就是我的网页现在的外观，但我希望文字不显示在图片下方。

Answer 1

* {
  margin: 0;
  padding: 0;
  height: 100%;
  text-decoration: none;
}

.background-image {
  background-image: url("http://oi67.tinypic.com/143dljp.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.under-text {
  position: absolute;
  z-index: -1;
}

nav {
  width: 100%;
  height: 50px;
  background-color: white;
}

ul {}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 50px;
}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  font-family: arial;
  color: grey;
  padding: 0 35px
}

ul li a:hover {
  color: black;
  cursor: pointer;
}

  <div class="background-image">
    <nav>
      <ul>
        <li><a href="https://codepen.io/AakashL/pen/ZNzyqj">Home</a></li>
        <li><a href="https://codepen.io/AakashL/pen/NVKvWX">Content</a></li>
        <li><a href="https://codepen.io/AakashL/pen/BeBdad">Contact Us</a></li>
      </ul>
    </nav>
    <p class="under-text">Welcome to Top Imports! This website is created as an informational page which lays out the top and most popular Japanese imports of all time. Mainly of the cars that you will see in the content page will be older cars. All of these cars are iconic
      Japanese sports cars that are highly saught out for in the United States of America. I hope you enjoy the collection that we have put together. </p>
  </div>

如何在CSS中的背景图片下创建文本

1 个答案: