字体颜色在一定阴影以下不会改变

Question

我正在使用Angular 12创建一个web应用程序。在我的导航菜单中，我希望文本颜色为深灰色(#161413)。然而，我的文字颜色不会低于一定的阴影。例如，我可以将文本设置为中等大小。红色(#670000)，但不能设置为"深色"红色(#450000)-文本在#67xxxx阈值下面显示为白色。我已经注释掉了所有的css(包括我的style .css父类)，只留下我的navmenu类。作为旁注:似乎有一些css对我的文本的影响，因为中红色看起来比它应该浅-像一些不透明度设置。

.navbar {
color: black!important;
justify-content: center;
height: 20vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="navbar">
<div class="navmenu" *ngIf="atHome">
<button class="nav-button" routerLink="/">HOME</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button>
</div>
<div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()">
<div class="burger-shield" routerLink="/">
</div>
</div>
</div>

Answer 1

看起来在这里工作得很好。你没有给我们足够的信息。显示显示问题的完整代码片段

.navbar {
color: red;
justify-content: center;
height: 20vh;
}
#a{
color:#450000;
background-color:white;
}
#b{
color:#670000;
background-color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="navbar">
<div class="navmenu" *ngIf="atHome">
<button id='a' class="nav-button" routerLink="/">HOME</button> |
<button id ='b' class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button>
</div>
<div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()">
<div class="burger-shield" routerLink="/">
</div>
</div>
</div>

Answer 2

感谢大家的贡献。这个问题真的让我整个上午都被难住了，你(以及我)对为什么这个看似简单的代码片段不起作用的困惑迫使我跳出框框思考。我最近下载了一个名为"darkreader"的火狐插件。让我访问的每个网站都变成暗模式。这个插件有一个滑块，使深色阴影更亮，直到他们达到前面提到的阈值-在这一点上，他们被照亮。