代码之家 › 专栏 › 技术社区 › fightstarr20

CSS-根据背景更改文本颜色

css html jquery

fightstarr20 · 技术社区 · 6 年前

我有一个简单的布局包括三个全高div和一个固定的标题栏。

body,html {
  padding:0;
  margin:0;
}

.header {
  position:fixed;
  width:100%;
  height:50px;
  color:white;
  margin:20px;
}

.section1 {
  background:black;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white;
}

.section2 {
  background:white;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section3 {
  background:black;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white;
}

<div class="header">
  Header Content
</div>
<div class="wrapper">
  <div class="section1">
    Section One Content
  </div>
  <div class="section2">
    Section Two Content
  </div>
  <div class="section3">
    Section Three Content
  </div>
</div>

我正试图使标题栏文本颜色变为黑色时,它滚动与白色背景的部分。

我已经看到了一些jQuery插件,这些插件应该可以实现这一点,但是我试图避免任何不必要的脚本。

CSS会 mix-blend-mode 功能允许我实现这个吗?有没有人能给我举个类似的例子?

2 回复 | 直到 6 年前

Temani Afif 6 年前

你可以用 mix-blend-mode:difference

body,
html {
  padding: 0;
  margin: 0;
}

.header {
  position: fixed;
  width: 100%;
  height: 50px;
  margin: 20px;
  color:#fff;
  mix-blend-mode: difference;
}

.section1,
.section2,
.section3{
  background: black;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.section2 {
  background: white;
  color:#000;
}

<div class="header">
  Header Content
</div>
<div class="wrapper">
  <div class="section1">
    Section One Content
  </div>
  <div class="section2">
    Section Two Content
  </div>
  <div class="section3">
    Section Three Content
  </div>
</div>

Duma 6 年前

你可以用jquery来做,当发生什么事情时,做:

$('yourdiv1').css({"color": "black"})
$('yourdiv2').css({"background-color": "white"})

要将其设置为默认值,请执行以下操作:

$('yourdiv1').css({"color": ""})
$('yourdiv2').css({"background-color": ""})

同时添加 transitions 让它看起来很漂亮。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前