Question

我有我的编码，我只想只使用 Css 做一些小改动，但没有得到我的结果。

实际上，我想将页脚小部件 div 覆盖在套接字 div 上，但套接字 div 文本“由 john doe 设计”应该是可见的。可能吗？

换句话说：页脚小部件背景被覆盖在套接字背景上，但套接字文本应该对用户可见。谢谢

#footer {
   animation-name: backgroundColorPalette;
   animation-duration: 19000ms;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
}

#footer {
   padding: 70px 0px;
   z-index: 1;
}

#socket {
   margin: auto;
   background: #000;
   color: #fff;
   padding: 5px 0px;
}

@keyframes backgroundColorPalette {
   0% {
      background-color: #ec008c;
   } 100% {
      background-color: #00bcc3;
   } 50% {
      background-color: #5fb26a;
   } 33.3% {
      background-color: #fc7331;
   }
}

<div id="footer">
   <center><h2>Footer widgets</h2></center>
</div>

<div id="socket">
   <center><p>Design by John Doe</p></center>
</div>

Answer 1

你可以这样做：

#footer {
  animation-name: backgroundColorPalette;
  animation-duration: 19000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#footer {
  padding: 90px 0px;
  z-index: 1;
}
#socket {
  margin: auto;
  background: transparent;
  color: #fff;
  padding: 5px 0px;
  position: relative;
  bottom: 60px;
}
@keyframes backgroundColorPalette {
  0% {
background-color: #ec008c;
  }
  100% {
background-color: #00bcc3;
  }
  50% {
background-color: #5fb26a;
  }
  33.3% {
background-color: #fc7331;
  }
}

<div>
  <div id="footer">
    <center>
      <h2>Footer widgets</h2>
    </center>
  </div>

  <div id="socket">
    <center>
      <p>Design by John Doe</p>
    </center>
  </div>
</div>

所以这个想法被设置为 #socket 有 position: relative，所以我们可以使用 bottom: 60px 将它向上移动，使其覆盖 #footer。然后我们可以给 #socket 一个透明的背景。

我还增加了 #footer 的内边距，因此页脚 div 看起来更像您的问题。

如何在 Socket Div 背景上覆盖一个页脚小部件背景？

1 个答案: