格式化链接，使它们出现在 CSS 中的图像顶部

Question

我创建了一个网站，我试图将其他网页的一些链接放在图像顶部，有点像导航栏。到目前为止，我一直在尝试使用 position 属性并尝试修改我的 HTML 的 div 标签，但是，似乎没有得到想要的结果。

这里是相关的HTML & CSS：

.content {
  position: relative;
  color: #eaeaea;
  text-align: left;
}

.navigation {
  padding: 10px;
  float: left;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.navigation a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.navigation a:hover {
  background: #61ba48;
  color: #ffffff;
}

.subscribe {
  padding: 10px;
  float: right;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.subscribe a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.subscribe a:hover {
  background: #61ba48;
  color: #ffffff;
}

.Title {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: #61ba48;
  padding-left: 20px;
  padding-right: 20px;
  width: 200px;
  opacity: 0.8;
}

<div class="content">
  <img src="background.jpg" alt="Background" style="width: 100%;">
  <div class="Title">
    <h1 style=f ont-size:70px>IFN</h1>
    <p>Title</p>
  </div>
</div>

</div>

<hr>
<div class="navigation">
  <a href="pg1.html"> Home</a>
  <a href="pg2.html"> pg2</a>
  <a href="pg3.html"> pg3</a>
  <a href="pg4.html"> pg4</a>
</div>



<div class="subscribe">
  <a href="register.html"> Subscribe </a>
</div>

这是现在的样子：

这就是我想要实现的目标：

Answer 1

我建议您将这些链接包装在一个 div 中，并将该图像设置为该 div 的背景。

或者将 .content 设置为绝对值，其 z-index 值小于链接。

.content {
  position: absolute;
  /* Changed from relative to absolute */
  z-index: -1;
  /* Added */
  color: #eaeaea;
  text-align: left;
}

.navigation {
  padding: 10px;
  float: left;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.navigation a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.navigation a:hover {
  background: #61ba48;
  color: #ffffff;
}

.subscribe {
  padding: 10px;
  float: right;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.subscribe a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.subscribe a:hover {
  background: #61ba48;
  color: #ffffff;
}

.Title {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: #61ba48;
  padding-left: 20px;
  padding-right: 20px;
  width: 200px;
  opacity: 0.8;
}

<div class="content">
  <img src="http://via.placeholder.com/2000x850" alt="Background" style="width: 100%;">
  <div class="Title">
    <h1 style=f ont-size:70px>IFN</h1>
    <p>Title</p>
  </div>
</div>



<hr>
<div class="navigation">
  <a href="pg1.html"> Home</a>
  <a href="pg2.html"> pg2</a>
  <a href="pg3.html"> pg3</a>
  <a href="pg4.html"> pg4</a>
</div>



<div class="subscribe">
  <a href="register.html"> Subscribe </a>
</div>

Answer 2

我想到了两种方法来实现这一点。
1. 使用绝对位置。这很简单。我知道这可能是您不想做的事情。
2.一些“非常糟糕”的事情（见最佳答案）：How to put text over an image without absolute positioning or setting the image as backbround。 （我不确定它是否仍然有效）

编辑：现在看到想要的结果，我认为您可以使用绝对定位。 此外，您可以将图像设置为背景，如果这也给您预期的结果。

希望对你有帮助

Answer 3

见附件代码sn-p。将背景图像移至 CSS。此解决方案不需要 z-index 也不需要 position: absolute / relative。

为链接方框的背景添加了一些不透明度， 由于背景图像是随机选取的，因此可能很难设置链接的黑色文本。

我建议你也引入 CSS 网格来更好地控制布局。

body {
  background-image: url("http://source.unsplash.com/random/800x200");
  background-repeat: no-repeat;
}

.nav {
border: 2px solid black;
width: 40%;
height: 10px;
padding: 0px 10px 40px 10px;
margin: 0px 0px 0px 10px;
float: left;
background-color:rgba(255, 255, 255, 0.5)
}

.nav ul a {
  margin: 5px;
  color: black;
  text-decoration: none;
}

.subscriber ul a {
  margin: 5px;
  color: black;
  text-decoration: none;
}

.subscriber {
border: 2px solid black;
width: 20%;
height: 10px;
padding: 0px 10px 40px 10px;
margin: 0px 120px 0px 10px;
float: right;
background-color:rgba(255, 255, 255, 0.5)
}

  <div class= "nav">
    <ul>
       <a href= "pg1.html"> Home</a>
       <a href= "pg2.html"> pg2</a>
       <a href= "pg3.html"> pg3</a>
       <a href= "pg4.html"> pg4</a>
      </ul>
   </div>

   <div class= "subscriber">
     <ul>
        <a href= "pg1.html"> Subscribe</a>
      </ul>
    </div>

Answer 4

尝试研究一下这段代码来定位绝对值。

.imgWrapper {
  position: relative;
  /* so child's position absolute (top, bottom, left, right), 
will by relative to .imgWrapper */
  width: 350px;
  height: 160px;
  /* controlling size of img */
}

.imgWrapper img {
  width: 100%;
  /* fill imgWrapper 100% with image */
  height: 100%;
}

.imgWrapper .topLeft {
  position: absolute;
  top: 0;
  /* play with this to move box */
  left: 0;
  /* play with this to move box */
}

.imgWrapper .topRight {
  position: absolute;
  top: 0;
  right: 0;
}

.imgWrapper .bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.imgWrapper .bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}


/* tempolary colors */

.topLeft {background: #f00;}
.topRight {background: #0f0;}
.bottomLeft {background: #0f0;}
.bottomRight {background: #f0f;}

/* temporary box size */
.topLeft,
.topRight,
.bottomLeft,
.bottomRight {
  width: 50px;
  height: 20px;
}

<div class="imgWrapper">
  <img src="http://via.placeholder.com/300x150">
  <div class="topLeft"><!--Put here something--></div>
  <div class="topRight"><!--Put here something--></div>
  <div class="bottomLeft"><!--Put here something--></div>
  <div class="bottomRight"><!--Put here something--></div>
</div>