挖空文本混合模式不适用于 <body> 上带有背景图像的 <nav> 元素
Knockout Text mix-blend-mode not working for <nav> element over <body> with background img
我正在尝试创建带有剔除文本的导航栏。我已经测试了这段代码,只使用了一个 <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>
条不工作:
无论出于何种原因,它不喜欢您使用 <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>
运行 并在 整页 模式下查看代码片段以清楚地看到它。
我正在尝试创建带有剔除文本的导航栏。我已经测试了这段代码,只使用了一个 <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>
条不工作:
无论出于何种原因,它不喜欢您使用 <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>
运行 并在 整页 模式下查看代码片段以清楚地看到它。