16

疑似要素が div に表示されない。スプライト画像を使用していますが、スプライト以外の画像も試しましたが、何もしませんでした。絶対配置、z-index、マージンなどを使用するなど、複数の戦略を試しました。間違っていない場合、または明らかに何か間違っている場合は、正しく実行しているようです。私はコミュニティに不慣れで、こことGoogleも検索しましたが、表示されない理由については結果がありません.コードは、最も基本的な試みの下にあります. 時間を割いて助けてくれたすべての人に感謝します。

.test {
    display:inline-block;
    background:#fff;
    width:60%;
}

.test:before,
.test:after {
     background:url("/imgs/Sprite2.png") repeat-y;
}

.test:before,
.test:after {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
}

.test:before {
    content:"";
    background-position:0 0;
}

.test:after {
    content:"";
    background-position:-55px 0;
}

私は今それが働いています。コードは以下です。私はすでにこれを試したと断言できますが、最初にやったときに何か間違ったことをしたに違いありません.

 .test {
     background:#fff;
     width:60%;margin:0  0 60px 5%;
 }

 .test:before,
 .test:after {
     content:"";
     background:url("/imgs/Sprite2.png") repeat-y;
     position:absolute;
     top:0;
     width:27px;
     height:100%;
 }

 .test:before {
     right:100%;
     background-position:0 0;
 }

 .test:after {
     left:100%;
     background-position:-55px 0;
 }
4

3 に答える 3

10

編集:

これは、でheight:100%;言及されている問題です.test:before,.test:after

height:100%to .testand for htmland bodyalsoに言及する必要があります。

CSS の推奨される変更を以下に示します。

これを試して：

body, html { height: 100%; }

.test{ 
    display:inline-block; 
    background:#fff; 
    width:60%;
    height: 100%; /*added height*/
}

.test:before,
.test:after{
    content:"";
    background:url("/imgs/Sprite2.png") repeat-y;
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;   
}

.test:before{ background-position:0 0 }
.test:after{ background-position:-55px 0 }

ワーキングデモ

于 2012-09-24T06:29:28.377 に答える
3

ボタンを使用して回答したことを示したことがないため、これが正しい回答です。回答済みと見なされると考えて、一番上に配置しました。基本的に、どこかで最初に何か間違ったことをしたに違いありません。これが鉱山に似た問題を抱えている人々に役立つことを願っています.

.test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}
于 2012-09-28T13:17:14.303 に答える