伪元素未显示在 div 上。我正在使用 sprite 图像,但我也尝试过非 sprite 图像,但没有任何效果。我尝试了多种策略,例如绝对定位、使用 z-index、边距等。如果我没有弄错或者显然我做错了什么,我似乎做对了。我是社区的新手,在这里和谷歌上都进行了搜索,但没有找到它为什么不显示的结果。代码在下面是最基本的尝试。感谢所有花时间提供帮助的人。
.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;
}
最佳答案
编辑:
这是.test:before,.test:after
中提到的height:100%;
的问题
您需要在 .test
和 html
和 body
中提及 height:100%
,
请参阅下面建议的 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 }
关于css - 伪元素不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12559763/