如何使用CSS边框间距（或）单独填充背景图像？

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

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

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

那么，如何在导航文本下添加间距，使bg图像（悬停）变低，但右边框线不会变长

看看我的CSS代码是否有用

`

`您可以使用CSS

background-position: 10px 10px; 

例如，作为X和Y，您也可以按百分比进行

你也能做到

background-position: center center;

或

比如说

编辑------ 我想你的顺序错了，用中底代替中底，试试看

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

---

但仍然没有找到那种神奇的方法来做这件事。。。但我找到了一个可行的替代方案

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

---

工作

谢谢你，但是这个例子不起作用。这是我的CSS代码-右边框始终可见-底部bg图像仅在悬停和当前时可见…我添加了我的CSS代码above@revv86那个CSS代码很奇怪。不管怎样，我说的是背景属性，而不是边界，因为我知道你的问题是关于它的。对不起，它太快地保存了我的评论。看到上面的css代码，很好的一个，谢谢：-）谢谢，我确实改到了中间底部，（已经在我的Chrome上工作了）。对我的问题有什么想法吗？：-）现在应该可以用了！，我的意思是，你在哪里放置了一个无效的x坐标（底部），所以被忽略了，你能用这个来解决吗？

background-position: right top; 

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