为什么添加CSS梯度禁用背景颜色样式

我已经创建了使用自动的当前项目的水平梅努尼。

#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 
}

使用此技巧：

<body id="home">

和这个CSS技巧

body#home ul#nav .menu-home, 
....
body#contact ul#nav .menu-contact {  background-color:  #EB9152;   }

这起作用，直到我决定为每个点增加梯度。梯度被添加到此片段中：

#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 
  background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
  ..

之后，当前的Menue选择不再起作用 - 当前项目并没有将其全部更改。知道为什么？

我对您的"当前页面突出显示技巧"有些困惑，但是看起来您只是用渐变来覆盖背景颜色。您是否尝试过：

background-color:  #EB9152!important;

通过反复试验，它在我将梯度从（nav li a）块移动到（nav）块之后起作用 - 此处完整代码：

#nav
{
  float: right;   
  margin: 0 0 3em 0;
  padding: 0 0;
  list-style: none;
      background-color: rgba(225, 225, 225, .0);
   background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,241,241,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(215,215,215,1)));
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -o-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -ms-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d7d7d7', GradientType=0 );
}
#nav li { float: left;   }
#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 
    border-right-style:solid;
    border-right-color:#fff;
    border-right-width: 1px;
}

相关内容

最新更新

热门标签：