Question

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

我有一个白色的默认后退按钮。但是，如果背后的图像类似于此https://newevolutiondesigns.com/images/freebies/white-wallpaper-8.jpg，则按钮将不会显示。

以下是有问题的标记：

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

Answer 1

首先，您可以尝试获取背景图片的主色，如this。

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

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

1 个答案: