jquery 根据同一专色中其他元素的颜色设置文本颜色

1sbrub3j 于 2023-01-25 发布在 jQuery

关注(0)|答案(2)|浏览(169)

我想让固定文本根据其背后的确切背景颜色逐个像素地更改其颜色。可以吗？In the given example, part of the text on the blue background would be white如果显示文本的形状的边缘与水平/垂直边缘不同，可以吗？
我尝试使用JQuery来定位页面上的特定元素，因为我知道scroll函数只允许定位滚动位置，所以只能定位水平元素，文本将整体改变颜色，而不是逐个像素地改变颜色，这将是我的目标，因为我计划添加自定义形状的背景，它将使文本在过渡位置也可读，正如示例所示。即使这样也不起作用，可能是由于一些CSS问题。这里有一种在CSS中做这件事的方法吗？

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll <= $('.fp-container-1').offset().bottom) {
      $('nav-button').css('color', 'black');
    }
    if (scroll >= $('.fp-container-2').offset().top) {
      $('nav-button').css('color', 'white');
    }
  });

.fp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
}

jquery

来源：https://stackoverflow.com/questions/75225372/set-text-color-based-on-color-of-another-element-in-the-same-spot

2条答案

按热度按时间

iszxjhcz1#

h1 {
  mix-blend-mode: difference;
  color:red;
}

/* LAYOUT */
section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 500px;
  width: 100%;
}

section div {
  position: absolute;
  width:100%;
  height: 50%;
  z-index: -1;
}

.top {
  top: 0;
  background: red;
}

.bottom {
  bottom: 0;
  background: blue;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 50px;
}

<section>
  <div class="top"></div>
  <div class="bottom"></div>
  <h1>Hello World</h1>
</section>

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

svdrlsy42#

您可以通过使用CSS3 filter属性来实现这一点。
语法为：

.nav-button {
    color: white;
    filter: brightness(50%) invert(1);
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
    filter: brightness(50%) invert(1);
}

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

我来回答

jquery 根据同一专色中其他元素的颜色设置文本颜色

2条答案

相关问题

热门标签

最新问答