css - 如何CSS边框间距(或)分别填充背景图片？

Question

我的 Wordpress (TwentyTwelve) 导航菜单效果很好，但我想通过设计做到这一点，但做不到；

• 没有导航背景(清晰，我们看到页面背景)= 完成
• li a border-right 1px solid = done
• li 悬停背景图片，无重复，底部居中 = 完成

所以问题是:我的背景图片太靠近我的导航文本...但是如果我添加填充或行高，那么右边框会变得太长。

那么我如何在我的导航文本下添加间距，以便我的 bg 图像(悬停)变低，但右边界线不会变长？

如果有帮助，请查看我的 CSS 代码

`

.main-navigation li a {
color: #fff;
line-height: 1.0;
text-transform: uppercase;
white-space: nowrap;
    background:;
padding:0 15px 10px 15px; 
margin:0;
border-right:#8fbf3d 1px solid;
}

.main-navigation li a:hover {
color: #fff;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #8fbf3d;
font-weight: bold;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}

`

Answer 1

你可以使用CSS；

background-position: 10px 10px; 

例如是 X 和 Y，你也可以按百分比来做。

你也可以；

background-position: center center;

或

background-position: right top; 

例如。

编辑------ 我认为您的顺序错误而不是底部中心使用中心底部，请尝试；

background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat center bottom;