html – 在背景图像上使用伪元素之前和之后

概述我想要从三个(背景)图像构造导航项,第一个和最后一个是固定宽度,中心是可变宽度,具体取决于导航项中文本的宽度.我被引导相信使用前后的伪元素将是最好的方法.当我尝试这个时,导航项的主(中央)背景图像与前后图像重叠. 你可以在this page看到我的意思. 这是CSS： .box { background-image: url(nav/images/nav_02.png); backgr 我想要从三个(背景)图像构造导航项,第一个和最后一个是固定宽度,中心是可变宽度,具体取决于导航项中文本的宽度.我被引导相信使用前后的伪元素将是最好的方法.当我尝试这个时,导航项的主(中央)背景图像与前后图像重叠.

你可以在this page看到我的意思.

这是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 >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);}

总结

以上是内存溢出为你收集整理的html – 在背景图像上使用伪元素之前和之后全部内容，希望文章能够帮你解决html – 在背景图像上使用伪元素之前和之后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。