文章/答案/技术大牛

发布

社区首页 >问答首页 >混合心情和黑色文本

问混合心情和黑色文本
EN

Stack Overflow用户

提问于 2020-05-14 02:10:09

回答 3查看 1.9K关注 0票数 1

你好，我正试图在这个网站中实现以下效果

这是混合黑色文本滚动使用混合混合模式，我检查了代码，并试图复制它，但它的ofc不工作良好，这里是我的代码

.nav {
  width: 95vw;
  display: flex;
  justify-content: space-between;
  font-size: 3vw;
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
}
.nav__item {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

<nav class="nav">
  <a href="" class="nav__item">home</a>
  <a href="" class="nav__item">articles</a>
  <a href="" class="nav__item">info</a>
</nav>

<section class="hero">
  <img src="https://images.unsplash.com/photo-1589362086172-2c29bea70386?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" alt="">
</section>

这里的问题是，我希望文本是黑色的，而不是白色的，我检查了代码，他将颜色设置为白色，但是屏幕上是黑色的，涉及到js吗？

javascript

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-05-14 02:32:45

您需要为整个页面制作一个容器，然后在CSS中将其背景色设置为白色。下面是一个例子

.nav {
  width: 95vw;
  display: flex;
  justify-content: space-between;
  font-size: 3vw;
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
}
.nav__item {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.container {
background-color: white;
height: 100%;
width: 100%;
}

<div class="container">
<nav class="nav">
  <a href="" class="nav__item">home</a>
  <a href="" class="nav__item">articles</a>
  <a href="" class="nav__item">info</a>
</nav>

<section class="hero">
  <img src="https://images.unsplash.com/photo-1589362086172-2c29bea70386?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" alt="">
</section>

 Run code snippet
 </div>

票数 0

Stack Overflow用户

发布于 2020-05-14 03:45:57

假设您的浏览器使用基于RGB (红色、绿色、蓝色)的颜色，每个颜色的数值介于0到255之间。256^3 =‭16,777,216‬颜色。CSS mix-blend-mode: difference;给出background-color减去color的绝对值(距离为零)。如果背景为白色，则表示为rgb(255,255,255)。如果您的文本是黑色的，您将有一个颜色的rgb(0,0,0)，所以如果每一列(颜色)被减去，你得到的绝对值，你得到rgb(255,255,255)，所以文本仍然是白色的。如果你的文本是白色的rgb(255,255,255)，你减去rgb(0,0,0)并得到绝对值，你就会在白色上变黑。如果您的背景是黑色rgb(0,0,0)，而您的文本是白色rgb(255,255,255)，您将得到白色文本。这对你意味着什么？在使用mix-blend-mode: difference;时，如果您想要真正的颜色差异，就必须使用白色文本。但是，您的问题似乎是没有在background-color上设置body。它们在alpha通道上没有绝对区别，默认的background-color是transparent。

票数 1

Stack Overflow用户

发布于 2020-05-14 02:38:28

我们需要在肚脐下添加一些白色的东西(白色文本或白色形状)才能看到它。我在导航线下加了一些白色的文字。它起作用了。

见下面的示例.

.nav {
    width: 95vw;
    display: flex;
    justify-content: space-between;
    font-size: 6vw;
    mix-blend-mode: difference;
    position: fixed;
    top: 0;
    z-index: 1;
}

.nav__item {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.hero {
    height: 200vh;
}

.hero .box-1 {
    position: absolute;
    background: black;
    width: 100%;
    height: 70px;
    left: 0;
    top: 100px;
    color: white;
    font-size: 50px;
}

<nav class="nav">
    <a href="" class="nav__item">home</a>
    <a href="" class="nav__item">articles</a>
    <a href="" class="nav__item">info</a>
</nav>

<section class="hero">
    <img src="https://images.unsplash.com/photo-1589362086172-2c29bea70386?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" alt="">
    <div class="box-1">test  test test</div>
</section>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61788100

复制

相似问题

问混合心情和黑色文本
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问混合心情和黑色文本EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问混合心情和黑色文本
EN