[英]Using before and after pseudo-elements on background image
我想要从三个(背景)图像构建导航项,第一个和最后一个是固定宽度,中心是可变宽度,具体取决于导航项中文本的宽度。 我被引导相信使用前后的伪元素将是最好的方法。 当我尝试这个时,导航项的主(中央)背景图像与前后图像重叠。
你可以在这个页面上看到我的意思。
这是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>
我可以使用伪元素以这种方式使用背景图像吗?
谢谢,
缺口
是的, 但您必须使用左右属性将伪元素移动到正确的位置。 主框定位的填充不正确。 更好地利用保证金
.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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.