4

ナビゲーション項目のテキストの幅に応じて、最初と最後が固定幅で、中央が可変幅の 3 つの (背景) 画像からナビゲーション項目を作成したいと考えています。前後に疑似要素を使用することが最善の方法であると信じるようになりました。これを試してみると、ナビゲーション項目のメイン (中央) の背景画像が前後の背景画像と重なっています。

このページで私が言いたいことを理解できます。

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

はい。ただし、疑似要素を正しい位置に移動するには、左属性と右属性を使用する必要があります。メインボックスの配置に対してパディングが正しくありません。より良い使用マージン。

.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 に答える