Css 如何根据后面图像的颜色将后退按钮图标的字体颜色设置为白色或黑色？

我正在使用ionic创建一个移动应用程序，在其中一个页面上，我将标题栏设置为透明，并以图像作为背景

我有一个默认的后退按钮，它是白色的。但是，如果它后面的图像是这样的，那么按钮将不会显示

以下是有问题的加价：

<ion-header-bar align-title="left" class="bar-clear">
    <div class="buttons">
        <button class="button button-icon ion-arrow-left-c" ng-click="goBack()"></button>
    </div>
</ion-header-bar>
<ion-content scroll="true" class="no-header my-view">
    <ion-slide-box class="item-slide-box">      
        <ion-slide ng-repeat="post in vm.post.images" ng-cloak>
            <img class="img-ng" ng-src="{{image}}">                
        </ion-slide>    
    </ion-slide-box>

---

首先，您可以尝试获得背景图像的主色调，如下图所示

---

接下来，根据颜色，如果颜色超出某个范围（由您定义），则可以为按钮设置适当的类。该类将指定背景是白色还是黑色。这并不是一个具体的LESS解决方案，但您可以基于此修改LESS主题。比如调用less.modifyVars（）并重新分配变量。

我看到您将其标记为CSS/less，但这不会成为CSS问题，因为CSS无法确定图像的颜色。您需要在模板中执行此操作，并为更改字体颜色的按钮添加适当的类。也许可以尝试使用CSS混合模式：谢谢，这非常有趣。我试着少学点东西。有没有一种方法可以实现这样一种功能：如果背景超过某个RGB阈值，则只使用白色，否则使用黑色？不，Less没有图像分析/处理功能，因此它也无法知道背景的颜色。