也许这种解决方法
不知道具体的参数是什么,以下解决方案可能对您有用,也可能没用。但是,我提供它,以防它对您的情况有用。
这是小提琴的例子。HTML 就像您拥有的一样。我删除了你说没有必要line-height
的那个。span
如果您这样做,则需要在下面相应地调整伪元素height
。该高度应大致匹配line-height
,通常约为1.1
or 1.2
,但如果设置为 ,则500px
需要height
为伪元素。
CSS
#fractal {
background-image:url('http://marcomolina.com.br/lab/fractal.jpg');
background-repeat: repeat;
width:500px;
height:500px;
}
.centerdotline {
position: relative; /* using this to place the dots */
text-align:center;
}
/* your span can also be set to display: inline-block and have top padding or margin */
.centerdotline span {
padding: 0 20px;
/*
Did not remove, but skipped centerdotline background image by not putting the background there to keep the background of fractal div behind the text
*/
}
/* put the dots in pseudo-elements and position off .centerdotline edges */
.centerdotline span:before,
.centerdotline span:after {
content: '';
position: absolute;
height: 1.2em; /* this might vary slightly by font chosen */
width: 40%; /* this will vary by text size */
background-image:url('http://marcomolina.com.br/lab/dotline.png'); /* with alpha channel */
background-repeat: repeat-x;
background-position: center;
}
.centerdotline span:before {
left: 0;
}
.centerdotline span:after{
right: 0;
}