使用角度来设置相关CSS的样式
我使用Angular让用户更改引导导航栏的颜色。实际的背景颜色更改本身非常简单,但我还想更改一些相关元素,如边框颜色和一些阴影 我所拥有的:使用角度来设置相关CSS的样式,css,angularjs,twitter-bootstrap,ng-style,Css,Angularjs,Twitter Bootstrap,Ng Style,我使用Angular让用户更改引导导航栏的颜色。实际的背景颜色更改本身非常简单,但我还想更改一些相关元素,如边框颜色和一些阴影 我所拥有的: <nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }"> 我如何使用user.topBarBackgroundColor定义一些阴影,例如导航栏边框的较暗阴影、高亮显示的lis等 请注意,文本颜色可以独立更
<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">
我如何使用user.topBarBackgroundColor定义一些阴影,例如导航栏边框的较暗阴影、高亮显示的lis等
请注意,文本颜色可以独立更改,因此任何方法都应该同时应用于该颜色
编辑
我只需要在现代浏览器中使用它,所以任何采用的CSS3、HTML5等都是公平的我通过创建.navbar rgba colors类并将其添加到.navbar元素来解决这个问题。下面的CSS LESS覆盖了相关的引导默认值:
.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;
}
}
不透明度更改使文本在悬停时显示得更亮,而背景使聚焦/活动a元素也显示得更亮
然后我在HTML中实现如下:
<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">
现在,更改topBarBackgroundColor和topBarColor的十六进制值将分别更改导航栏的背景色和文本色。我正在使用它,它似乎工作得很好。简而言之,您需要计算该颜色的较暗版本。我也做过类似的事情,使用javascript在颜色空间之间进行转换,并计算较深/较浅的颜色。@Ted您是否相对确定没有任何CSS3技巧可以做到?例如,JS方法是一种可行的方法,还是唯一可行的方法?这取决于您希望实现的目标您可能会使用轮廓/边框/框阴影等透明的黑白值…但是如果没有实时样本,很难说这是否可行,轮廓和框阴影来演示我的意思。你想用哪种方式看到css随着ng样式、事件或其他东西的变化?
<a ... ng-style="{ color: user.topBarColor }">Home</a>