Question

我有一个css3移动云背景，就像我的网站一样。

然而，云仍然在文本之上，当我们将鼠标悬停在文本上时，我看不到任何文字。有没有办法让这些元素出现在云端？

Answer 1

如果你的HTML结构是这样的：

<div id="sky-container">
  <div id="cloud-container">
    ...
  </div>
</div>
<div id="text-container">
  ...
</div>

恭喜，你已经完成了，你只需要正确定位它们（绝对定位）。文字应该已经出现在云层之上。如果你的HTML是这样的：

<div id="cloud-container">
  ...
</div>
<div class="background">
  <div class="background">
     <div class="text">
        ...
     </div>
  <div class="text">
    ...
  </div>
  ...
</div>

即。如果您没有单个背景，您仍然可以在背景和文本之间插入云。您只需将背景与HTML中的文本分开即可。您可以使用z-index在文本和背景之间放置云：

.background{
  z-index:0;
}
#cloud-container{
  z-index:1;
}
.text{
  z-index:2;
}

由于默认z-index为0，如果您知道云容器将是页面上的最后一个元素（并且是获得position:absolute的元素），则可以将CSS简化为：< / p>

.text{
  z-index:1;
}

具有z-index的元素还需要将其position属性明确设置为为absolute，relative或fixed。< / p>

如何使HTML元素成为另一个？

1 个答案: