CSS3 导航链接背景答案

【问题标题】：CSS3 Nav Link BackgroundsCSS3 导航链接背景
【发布时间】：2015-12-07 10:02:53
【问题描述】：

我试图让用户处于活动状态，以向用户显示他们在哪个页面上。我在锚标签周围创建了一个“nav-active”的 div 类，如下所示。

<li><div class="nav-active"><a href="index.html">Blog</a></div></li>

我这样做是为了让背景的大小根据导航链接的字符数动态变化。

.nav-active {
background: #ff4b33; /* Old browsers */
background: -moz-linear-gradient(top,  #ff4b33 0%, #ca2913 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* IE10+ */
background: linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0 ); /* IE6-9 */

height:70px;
margin-top: -30px;
padding: 0 15px;

由于填充，取决于我在链接移动的页面。

我确信有更好的方法来做到这一点，问题是如何做到这一点？

任何帮助将不胜感激。

【问题讨论】：

标签： css hyperlink background nav

【解决方案1】：

直接将背景应用到链接样式中，如下所示：

<li><a class="nav-active" href="index.html">Blog</a></li>

为防止您的链接根据您所在的页面而改变大小，请为您的所有链接设置定位样式，而为.navactive设置背景：

#nav li {
    position: float;
}

#nav li a {
    display: block;
    padding: 0 15px;
    ...
}
#nav li a.nav-active {
    -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); 
    ...
}

【讨论】：