4

我想从三个（背景）图像构建导航项，第一个和最后一个是固定宽度，中间是可变宽度，具体取决于导航项中文本的宽度。我被引导相信在前后使用伪元素是最好的方法。但是，当我尝试此操作时，导航项目的主要（中央）背景图像与之前和之后的背景图像重叠。

您可以在此页面上看到我的意思。

这是CSS：

.box {
   background-image: url(nav/images/nav_02.png);
   background-repeat: repeat;
   height:20px;
   position: absolute;
   padding: 10px 13px;
}


.box:before {
    left: 0;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: 0;
    background-image: url(nav/images/nav_03.png);
}

.box:before,
.box:after {
    content: ' ';
    width: 13px;
    height:40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

和 HTML：

<div class="box">here is some text</div>

我可以使用伪元素以这种方式使用背景图像吗？

谢谢，

缺口

4

1 回答 1

5

是的，但是您必须使用 left 和 right 属性将伪元素移动到正确的位置。主框定位的填充不正确。更好地使用保证金。

.box {
    background-repeat-x: repeat;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat;
    height: 40px;
    position: absolute;
    margin: 0 13px;
    line-height: 40px;
}

.box:before, .box:after {
    content: ' ';
    display:block;
    width: 13px;
    height: 40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
}

.box:before {
    left: -13px;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: -13px;
    background-image: url(nav/images/nav_03.png);
}
于 2012-06-03T15:23:25.657 回答