Knockout Text mix-blend-mode не работает для элемента <nav>над <body>с фоновым изображением - PullRequest
Новая
       80

Knockout Text mix-blend-mode не работает для элемента <nav>над <body>с фоновым изображением

1 голос
/ 04 февраля 2020

Я пытаюсь создать панель навигации с нокаутирующим текстом. Я проверил этот код, просто используя <div> с <p> внутри, и заставил его работать должным образом. Однако, когда я пытаюсь оформить элемент <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>, так и моего теста <div>, <div> работает правильно и <nav> бар не работает:

enter image description here

1 Ответ

0 голосов
/ 04 февраля 2020

По какой-то причине вам не нравится, что вы используете элемент <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>

Запустите и просмотрите фрагмент кода в режиме Полная страница , чтобы увидеть его наглядно.

...