CSS：在标题放置在带图案的背景上的标题之后创建尾随点

Question

请查看随附的屏幕截图。我试图在CSS中创建这个效果。

尾随点需要覆盖元素的整个宽度（100％）并具有响应性。请注意，标题放在图案背景上，因此以下技术对我不起作用，因为当我给跨度一个白色背景时，底层图案不再可见。

Example

<style type="text/css">
body{background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/582/582552.png?1250954754) repeat 0 0 transparent}
h1{background: url(http://i.stack.imgur.com/23XVz.png) repeat-x 0 0 transparent;}
h1 span{background: #fff;}
</style>

<h1><span>SERVICE</span></h1>

Answer 1

试试这个：

<h1>Service<span></span></h1>

的CSS：

h1 span {
   display: inline-block;
   background: url(dots.gif) repeat-x 0 0 transparent
}

以下两个示例： example 1 ， example 2 。

修改 的

这是 exmaple 3 与您的虚线图像。

Answer 2

您可以使用display table-cell

获得此效果

body {
    background: red;
}
h1 {
    display: table-cell;
    padding-right: 10px;
}
span {
    width: 100%;
    display: table-cell;
    background: url(http://i.stack.imgur.com/23XVz.png) repeat-x 0 center;
}

fiddle

Answer 3

由于背景图片的定位，请尝试：

h1{background: url(dots.gif) repeat-x center center transparent;}

http://jsfiddle.net/bh5XN/