javascript - 自动更改可点击幻灯片顶部的 div 的文本颜色

Question

我正在制作带有覆盖的全屏可点击幻灯片。虽然此菜单的起始颜色是白色，但我想知道是否可以通过在较亮的图像上切换为黑色来最大限度地提高易读性。 幻灯片的顺序是固定的，因此无需猜测哪个图像应该显示白色或黑色版本。这个问题有简单的解决方案吗？

我知道围绕这个主题有无数问题，但似乎在所有这些情况下都嵌套了文本。或者建议的 .js 脚本是详细说明(看起来)这样一个简单问题的方法。

提前致谢。

HTML

  <div class="fullscreenslideshow">
  <div style="background-image:url(image1)" class="dark"></div>
  <div style="background-image:url(image2)" class="light"></div>
  <div style="background-image:url(image3)" class="light"></div>
  <div style="background-image:url(image4)" class"dark"></div>
  </div>

JS

$('.dark').click(function(){
     jQuery('h2').toggleClass('textlight');
});

$('.light').click(function(){
     jQuery('h2').toggleClass('textdark');
});

CSS

 .textlight {
 color:#FFF;
 }
 .textdark {
 color:#000;
 }

Answer 1

您可以使用白色文本和mix-blend-mode: difference; ( see here for more examples )

div {
  background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 25%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 60%,rgba(255,0,0,1) 79%,rgba(255,0,0,1) 100%);
}

h2 {
  padding: 24px;
  text-align:center;
  font-size: 3em;
  
  color: #fff;                
  mix-blend-mode: difference;
}

<div>
  <h2>THIS IS SOME TEXT YYEY</h2>
</div>

如果您不想受制于不支持 mix-blend-mode 的旧浏览器，并且可以完全控制文本颜色，您可以使用 data- * 属性:

$("[data-textcolor]").css("color", function() {
  return this.dataset.textcolor;
});

body{background:#C0FFEE;}

<div class="fullscreenslideshow">
  <div style="background-image:url(image1)" data-textcolor="#fff">SLIDE1</div>
  <div style="background-image:url(image2)" data-textcolor="#000">SLIDE2</div>
  <div style="background-image:url(image3)" data-textcolor="rgba(0,0,0,0.4)">SLIDE3</div>
  <div style="background-image:url(image4)" data-textcolor="red">SLIDE4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>