css - 使用 Angular 来设置相关 CSS 的样式

Question

我正在使用 Angular 让用户更改 Bootstrap 导航栏的颜色。实际的背景颜色更改本身很简单，但我还想更改一些相关元素，如边框颜色和一些阴影。

我有什么:

<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">

我将如何使用 user.topBarBackgroundColor 为导航栏的边框、突出显示的 li 等定义一些阴影(例如较暗的阴影)？

请注意，文本颜色可以单独更改，因此任何方法都应该同时适用于它。

编辑

我只需要它在现代浏览器中工作，所以任何采用的 CSS3、HTML5 等都是公平的游戏

Answer 1

我通过创建一个 .navbar-rgba-colors 类并将其添加到 .navbar 元素来解决这个问题。下面的 CSS (LESS) 覆盖了相关的 Bootstrap 默认值:

 .navbar-rgba-colors {
   border-color: rgba(0,0,0,0.2);
   .navbar-nav > li > a,
   a.navbar-brand {
     opacity: 0.7;
   }
   .navbar-nav > li:hover > a,
   .navbar-nav > li > a:focus,
   .navbar-nav > li.active > a,
   .navbar-nav > li.active > a:hover,
   .navbar-nav > li.active > a:focus,
   .navbar-nav > li.open > a,
   .navbar-nav > li.open > a:hover,
   .navbar-nav > li.open > a:focus
   a.navbar-brand:hover,
   .navbar-header:hover > a,
   a.navbar-brand:focus {
     opacity: 1;
     background: rgba(255, 255, 255, 0.1) !important;
   }
 }

opacity 的变化使得文本在悬停时显得更亮，而 background 使得聚焦/事件的 a 元素也显得更亮。

然后我像这样在 HTML 中实现:

<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">

对于导航栏中的任何 a 元素:

<a ... ng-style="{ color: user.topBarColor }">Home</a>

现在更改 topBarBackgroundColor 和 topBarColor 的十六进制值会分别更改导航栏的背景颜色和文本颜色。我正在使用 angular-bootstrap-colorpicker为此，它似乎运行良好。