这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

问题和现象

长时间闲置页面，再回头看这个页面时会出现灰色：

探索步骤

PS：不想看废话的直接跳到后面，看“直接看最终样式修改”！！！

修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。 于是……

.el-menu-item.is-active {
  background: #247bb4 !important;
}

• 以为完事了吗？
• 不不不
• 正常使用时效果确实达到了

但是长时间闲置页面，再回头看这个页面时会出现

• 哪里来的灰色？？？
• 鼠标点击界面任意位置，灰色立马消失……
• 我……
• 疯狂百度，没人有这种情况
• 但是看到别人的代码如下：

.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

• 于是尝试着用background-color替换background
• 然后过了好几个月，发现这个现象还是存在
• 一次偶然的机会，被我捕获到了问题哈哈哈

• 莫名其妙这个时候会给当前元素加上background-color: rgb(204, 204, 204);
• 然后只要点击屏幕，瞬间这个值会变成background-color: rgba(0, 0, 0, 0.1);
• 所以，我只要给它默认设一下背景色就好了啊！！！

修改代码如下：

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

• 这次好像真的OK了
• 结果，心塞啊心塞，这个还是没解决
• 因为直接强制修改el-menu-item的背景色，会导致想要它变色的时候变不了了啊啊啊，脑壳痛。

直接看最终样式修改

因为需要菜单透明，于是乎这么设置以后很久没有给我蒙上一层灰了。

<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
  <navMenu :navMenus="menuData"></navMenu>
</el-menu>

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
  background-color: #247bb4 !important;
}