如何将CSS边框间距(或)填充背景图像分开?

时间:2013-12-02 17:03:31

标签: css wordpress menu navigation background-image

我的Wordpress(TwentyTwelve)导航菜单效果很好,但有了设计,我想这样做,但不能;

  • 没有导航背景(清楚,我们看到页面背景)=已完成
  • li a border-right 1px solid = done
  • 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;
}

`

2 个答案:

答案 0 :(得分:0)

你可以使用CSS;

background-position: 10px 10px; 

例如是X和Y,你也可以做百分比。

你也可以这样做;

background-position: center center;

background-position: right top; 

例如。

EDIT ------ 我认为你错了订单而不是底部中心使用中心底部,试试;

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

答案 1 :(得分:0)

仍然没有找到这样做的神奇方法......但我找到了一种可行的替代方案

  • 删除了右边框
  • 添加了一个背景图像,看起来像一个右边框线(但它是一个jpeg)并将它对齐
  • 添加了我之前的padding-bottom

工作!