css 当设置为“正常”以外的任何值时，我的混合混合模式文本会消失

vh0rcniy 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(141)

我希望固定位置的文本无论背景如何都能看到。我考虑过使用混合混合模式或给文本添加剪贴蒙版，这在网站上是不可见的，但只有通过文本才能看到，但我不知道该怎么做。我的混合混合模式似乎也不起作用。

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  margin: 0;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  top: 10vh;
  z-index: 1;
  mix-blend-mode: difference;
}

.fp-container-1 {
  display: flex;
  justify-content: center;
  top: 0vh;
  height: 100vh;
  width: 100vw;
  background-color: white;
}

.fp-container-2 {
  display: flex;
  justify-content: center;
  top: 0vh;
  height: 100vh;
  width: 100vw;
  background-color: blue;
}

<div class="blending-group">
  <h1 class="header">Header</h1>
  <div class="fp-container-1"></div>
  <div class="fp-container-2"></div>
</div>

css

来源：https://stackoverflow.com/questions/75295781/my-mix-blend-mode-text-disappears-when-set-to-anything-other-than-normal

1条答案

按热度按时间

x4shl7ld1#

你需要在你设置了mix-blend-mode的元素上设置一个background-color，否则，容器的背景色默认为transparent，因此没有任何东西可以用来计算差异（或者你选择的任何模式）。

* {
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  mix-blend-mode: difference;
  background: cadetblue;
}

.fp-container-1 {
  height: 100vh;
}

.fp-container-2 {
  height: 100vh;
  background-color: cadetblue;
}

<div class="blending-group">
  <h1 class="header">Header</h1>
  <div class="fp-container-1"></div>
  <div class="fp-container-2"></div>
</div>

赞(0）回复(0）举报 2023-02-01

我来回答

css 当设置为“正常”以外的任何值时，我的混合混合模式文本会消失

1条答案

相关问题

热门标签

最新问答