如何淡化带有重叠文本的标题

Posted

技术标签:

【中文标题】如何淡化带有重叠文本的标题【英文标题】：How to I fade a header with overlapping text 【发布时间】：2021-07-25 08:17:10 【问题描述】：

所以我想在这里有两个不同的标题。一个显示我的名字，另一个显示我认为非常整洁的引用。我想让它们在悬停时改变。

我曾经遇到过这种情况，但两组不同的文本不是在彼此之上，而是在下面。

我尝试用一​​些 js 来解决这个问题，因为我见过有人做类似的事情（所以我想“哎呀为什么它不起作用）。

请原谅无聊的网站和代码，我 3 天前才开始编码（这也许就是为什么这对我来说似乎是一项艰巨的任务）。 （它是一个测试网站，所以我选择了一个简单的主题......一份简历）

如果我能得到任何帮助，我将不胜感激。谢谢

function myFunction() 
  var element = document.body;
  element.classList.toggle("dark-mode")

body 
  font-family: Arial, Helvetica, News Courier;
  margin: 0;


.header 
  padding: 80px;
  text-align: center;
  background: #40826D;
  color: white;


.header:hover 
  background: #6e7f80;
  transition: 1s;
  color: #6e7f80;


.header h1 
  font-size: 40px;


.text 
  font-size: 40px;
  opacity: 0;


.header:hover .text 
  opacity: 1;
  color: white;
  transition: 1s;


.navbar 
  overflow: hidden;
  background-color: #333;


.navbar a 
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;


.navbar button 
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 21px;
  text-decoration: none;


.navbar a.right 
  float: right;


.navbar a:hover 
  background-color: #ddd;
  color: black;


.dark-mode 
  background-color: black;
  color: white;

<div class="header">
  <div class="text">
    <h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
    <p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
     creativity without failure</i></p>
  </div>
  <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
  <p>a curriculum vitae</p>
</div>

<div class="navbar">
  <a target="_self" href="file:///Users/lucafrias/Downloads/html/CV.html">Home</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
  <div>
    <button onclick="myFunction()"></button>
    <script type="text/javascript">
    </script>
  </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" class="right">Contact me</a>
</div>

<div style="text-align: center;font-family: News Courier">
  <h1>Welcome to my virtual curriculum!</h1>
  <h3>I hope this will give you a general idea of me.</h3>

  <p>This page will provide you with:</p>
  <p>My personalia</p>
  <p>Information about my academic career</p>
  <p>Information about my work experience</p>
  <p>Information regarding myself</p>
</div>

【问题讨论】：

能否请您解释得更好，我不明白您实际上想要实现什么 看起来您的淡入淡出正在悬停，我假设您希望淡入淡出动画在鼠标移出时淡入？也许您应该编辑您的问题，并更准确地说明您的预期结果。 【参考方案1】：

您正在寻找display 属性。只需将opacity: 0 替换为display: none 并将opacity:1 替换为display: block。您可以检查它们之间的区别here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Luca Frias</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body 
 font-family: Arial, Helvetica, News Courier;
 margin: 0;

.header 
padding: 80px;
text-align: center;
background: #40826D;
color: white;

.header:hover 
background: #6e7f80;
transition: 1s;
color: #6e7f80;

.header h1 
font-size: 40px;

.text 
font-size: 40px;
display: none;

.header:hover .text 
 display: block;
 color: white;
 transition: 1s;
 
 .navbar 
 overflow: hidden;
 background-color: #333;
 
.navbar a 
 float: left;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 20px;
 text-decoration: none;
 
.navbar button 
 float: right;
 display: block;
 color: white;
text-align: center;
padding: 21px;
text-decoration: none;

 .navbar a.right 
 float: right;
 
.navbar a:hover 
 background-color: #ddd;
 color: black;
 
.dark-mode 
 background-color: black;
 color: white;
 
</style>
</head>
<body>

<div class="header">
<div class="text">
<h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
<p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
 creativity without failure</i></p>
 </div> 
 <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
<p>a curriculum vitae</p> 
</div>

 <div class="navbar">
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV.html">Home</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
    <div>
  <button onclick="myFunction()"></button>
  <script type="text/javascript">
    function myFunction() 
        var element = document.body;
        element.classList.toggle("dark-mode")
    
  </script>
    </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" 
 class="right">Contact me</a>
</div>

 <div style="text-align: center;font-family: News Courier">
 <h1>Welcome to my virtual curriculum!</h1>
 <h3>I hope this will give you a general idea of me.</h3>

    <p>This page will provide you with:</p>
    <p>My personalia</p>
    <p>Information about my academic career</p>
    <p>Information about my work experience</p>
    <p>Information regarding myself</p>
  </div>
  </body>
  </html>

如果有什么不符合您的预期。在评论区提及

【讨论】：

【参考方案2】：

你可以用纯 css 得到它：

<style>
    .header 
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #40826d;
        color: white;
        position: relative;
        font-family: News Courier;
    
    .card 
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 400px;
        justify-content: center;
        color: white;
    
    .c1 .title 
        text-align: left;
        font-size: 40px;
    
    .c1 .text 
        text-align: center;
    
    .c1 
        padding: 0 5%;
    
    .c2 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        font-size: 20px;
        opacity: 0;
    
    .c2:hover 
        background: #6e7f80;
        opacity: 1;
        transition: 1s ease opacity;
    
    .c2 .title 
        text-align: center;
    
</style>
<div class="header">
    <div class="card c1">
        <h2 class="title">Brene Brown</h2>
        <p class="text">
            <i>There is no innovation and creativity without failure</i>
        </p>
    </div>

    <div class="card c2">
        <h2 class="title">Luca S. Frias Serrano</h2>
        <p>a curriculum vitae</p>
    </div>
</div>

我使用了“相对位置”和“绝对位置”。

在这种特殊情况下，只需将绝对定位的“卡片”与该集合居中：

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

并使用 z-index 获取位于 (.c1) 顶部的绝对定位“卡片”(.c2)

【讨论】：

以上是关于如何淡化带有重叠文本的标题的主要内容，如果未能解决你的问题，请参考以下文章

网格布局与侧边栏重叠

带有 Cordova 的 jQuery Mobile - 标题与 iOS 状态栏重叠

如何避免在散点图中重叠文本？

React Slick Custom Carousel 与图像重叠 div

网站 gif 延迟/重叠

如果多个带有手势的视图重叠，如何将 UIGestureRecognizer 放在前面