文本transparent与three.js动画背景和css类搞砸了结果

ui7jx7zq 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(129)

我想让BUTTON TEXT中的文本透明，以便在后台看到THREE.JS动画，并且如果我不插入下面的css类，如您在第一张图片中所见，则显示IS WORKING：

.center-mine{top: 50%; left: 50%; transform: translate(-50%, -50%);}

但是这样的话，我把文本放在左上角，而我需要那个类把文本放在中间，正如你在

下面的第二张图片中看到的，但是有了那个类，BUTTON就不再是透明的了，
整个CSS和HTML是以下我使用来自TAILWIND类太。
x一个一个一个一个x一个一个二个x
我花了不少时间，但没有结果这个问题。
我不明白为什么我不能有透明的按钮也在中心。
（我是初学者）
谢谢

css

来源：https://stackoverflow.com/questions/75309676/text-trasparent-with-three-js-animated-background-and-css-class-mess-up-the-resu

1条答案

按热度按时间

zf9nrax11#

添加position:absolute;到中央地雷类其他地方左和顶部属性不工作;

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
}
/*center-mine  class that makes everything not to work */
.center-mine{top: 50%; left: 50%; transform: translate(-50%, -50%);position:absolute}
.black {
background: black;
  mix-blend-mode: multiply;
  font-size: 80px;
}

.font-exo{
  font-family: 'Exo 2', sans-serif;
}
.font-space-mono{
  font-family: 'Space Mono', monospace;
}

<div id="app">
  <div class="absolute text-white text-center center-mine ">
    <h1 class="font-space-mono text-xl tracking-wider">AlexisWeber</h1>
    <p class="font-exo text-3xl ">AN EVERLASTING DESIRE FOR THE UNKNOWN & UNTOLD</p>
    <a href="https://www.instagram.com/4rc71c0" class=" inline-block border px-4 py-2 rounded-md text-sm font-space-mono lowercase mt-3 hover:bg-white hover:text-gray-800 hover:border-gray hover:uppercase " >Watch Works</a>

       <a class="black" href="#">button</a>

  </div>
</div>

赞(0）回复(0）举报 2023-02-06

我来回答

文本transparent与three.js动画背景和css类搞砸了结果

1条答案

相关问题

热门标签

最新问答