如何CSS边框间距(或)填充背景图像单独

Question

我的Wordpress（Twenty2Twelve）导航菜单工作得很好，但在设计方面我想这样做，但做不到；

• 导航没有背景（清除，我们看到页面背景）=完成
• li a边框右侧1px实心=完成
• li悬停背景图像，无重复，底部居中=完成

所以问题是：我的bg图像离我的导航文本太近了。。。但如果我加上填充或线条高度，那么右边的边框就会太长。

那么，我如何在导航文本下添加间距，使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; 

Answer 2

仍然没有找到实现这一点的神奇方法。。。但我找到了一个替代方案，可以工作

• 删除了右侧边框
• 添加了一个看起来像右边界线的背景图像（但它是jpeg），并将其向右对齐
• 添加了我以前的填充底部

工作！