我想制作一个带有截止 Angular 的 div。 我想用带有背景图像的 :before 和 :after 元素来做到这一点。 div 的左侧和右侧有定位。 但是他们不显示...
这是我的 html:
<div class="page">
<div class="canvas" id="canvas">
<div class="TimeLineContainer">
<div class="TimelineContent"></div>
</div>
</div>
</div>
这是我使用的 CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-size: 100%;
font-family: "Calibri", Arial, sans-serif;
color: black;
text-align: center;
overflow: hidden;
}
.page {
display: block;
text-align: left;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.page .canvas {
display: block;
text-align: left;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.page .canvas .TimeLineContainer {
display:block;
width:100%;
height:150px;
text-align: center;
overflow: hidden;
}
.page .canvas .TimelineContent {
display: block;
width:90%;
margin: 0 auto;
height:150px;
position: relative;
background-image: url(../img/middleTop.png);
background-repeat: repeat-x;
overflow: auto;
}
.page .canvas .TimeLineContainer .TimeLineContent:before {
position:absolute;
content:"";
top:0px;
left:-28px;
background-image: url (../img/cornerBL.png);
background-repeat: no-repeat;
display: block;
width: 28px;
height: 150px;
}
.page .canvas .TimeLineContainer .TimeLineContent:after {
position:absolute;
content:"";
top:0px;
right:-28px;
background-image: url (../img/cornerBR.png);
background-repeat: no-repeat;
display: block;
width: 28px;
height: 150px;
}
这些是我正在使用的图像:
转 Angular BL.png
中顶.png
和CornerBR.png
我真的不知道为什么前后图像不显示。
这是一个 JSfiddle:http://jsfiddle.net/VWhPY/
最佳答案
尝试 .page .canvas .TimeLineContainer .TimelineContent:after
(注意 TimelineContent 中的小写 l)。
它仍然不能正常工作,但这就是它根本没有出现的原因。现在您可以继续调试了。
另一个提示:在调试时在 :before 和 :after 元素上设置 outline: thin solid red
以更好地查看它们的位置,而不会干扰它们的盒子模型。
关于html - div前后不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14142679/