时间戳

首页 > 解决方案 > 淘汰赛文本混合模式不适用于

html - 淘汰赛文本混合模式不适用于

问题描述

我正在尝试创建一个带有剔除文本的导航栏。我已经使用<div>带有<p>内部的 a 测试了这段代码，并让它正常工作。但是，当我尝试<nav>使用相同的技术设置元素的样式时，文本保持黑色而不是透明。

HTML：

<body>
    <nav class="flex-row">
        <a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a>
        <a class="flex-center" href="about.html">about</a>
        <a class="flex-center" href="team.html">team</a>
        <a class="flex-center" href="services.html">services</a>
        <a class="flex-center" href="contact.html">contact</a>
    </nav>
    <div class="background">
        <div class="text flex-center">TEST</p>
    </div>
</body>

CSS：

body {
  width: 100vw;
  height: 100vh;
  background-image: url("../images/nyc.jpeg");
  background-position: top;
  background-size: cover;
}

nav {
  justify-content: space-around;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

nav a {
  height: 20vh;
  width: 20vw;
  font-family: 'Bebas Neue', cursive;
  font-size: 50px;
  align-self: stretch;
  position: relative;
  text-align: center;
}

.background {
  width: 100vw;
  height: 100vh;
  background-image: url('../images/nyc.jpeg');
}

.text {
  height: 100%;
  margin: 10px solid;
  font-family: 'Bebas Neue', cursive;
  font-size: 400px;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

这是<nav>条形图和我的 test的图像<div>，<div>正常工作而<nav>条形图不工作：

在此处输入图像描述

标签： htmlcssmix-blend-mode

解决方案

无论出于何种原因，它都不喜欢您使用您的<body>元素来尝试执行此操作。将所有内容包装<body>在一个单独的<div class="background-2">部门中，并对其应用与正文完全相同的样式似乎可以解决问题：

.background-2 {
  width: 100vw;
  height: 100vh;
  /* background-image: url("../images/nyc.jpeg"); */
  background-image: url("https://via.placeholder.com/200/f00");
  background-position: top;
  background-size: cover;
}

nav {
  justify-content: space-around;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

nav a {
  height: 20vh;
  width: 20vw;
  font-family: 'Bebas Neue', cursive;
  font-size: 50px;
  align-self: stretch;
  position: relative;
  text-align: center;
  color:black;
}

.background {
  width: 100vw;
  height: 100vh;
  /* background-image: url("../images/nyc.jpeg"); */
  background-image: url("https://via.placeholder.com/200/0f0");
}

.text {
  height: 100%;
  margin: 10px solid;
  font-family: 'Bebas Neue', cursive;
  font-size: 400px;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}
<body>
  <div class="background-2">
    <nav class="flex-row">
        <!-- <a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a> -->
        <a class="flex-center" href="index.html" class="logo">
          <img src="https://via.placeholder.com/200/000" style="height:15vh;">
        </a>
        <a class="flex-center" href="about.html">about</a>
        <a class="flex-center" href="team.html">team</a>
        <a class="flex-center" href="services.html">services</a>
        <a class="flex-center" href="contact.html">contact</a>
    </nav>
    <div class="background">
        <div class="text flex-center">TEST</p>
    </div>
  </div>
</body>

在全页模式下运行和查看代码片段以清楚地看到它。

推荐阅读