时间戳

首页 > 解决方案 > H1 标签不再显示在页面正文上

html - H1 标签不再显示在页面正文上

问题描述

所以我创建了一个名为“.content”的 div，我希望它显示一些文本，但由于某种原因它不会显示出来......也许我只是愚蠢但有人可以帮助我。

截屏：

.content{
    color: black;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    color: #fff;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: "Luna";
}
<header>  
  <div class="variation-a">
    <button class="suit_and_tie">About Me</button>
  </div>
</header>

<div class="content">
    <h1>Text</h1>
</div>

标签： htmlcss

解决方案

这里发生的事情是您将您的子元素保留在 3D 空间中，并且看起来与header::background您的.content元素重叠。

perspective: 1px;
transform-style: preserve-3d;

您必须.content通过 apply 将您的元素向前推进transform: translateZ() 

.content{
 transform: translateZ(30px)
}

此外，transform很可能总是采用变换风格：

推荐阅读