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）

一起使用

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果您不想受到不支持mix-blend-mode并且绝对控制文字颜色的旧浏览器的支配，您可以使用data-*属性：< / p>

＆＃13;

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

＆＃13;

body{background:#C0FFEE;}

＆＃13;

<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>

＆＃13;

在可点击的幻灯片放映之上自动更改div的文本颜色

1 个答案: