html - CSS:在标题放置在背景上的标题后创建尾随点

Question

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

尾随点需要覆盖元素的整个宽度 (100%) 并且是响应式的。请注意，标题位于背景上，因此以下技术对我不起作用，因为当我为跨度设置白色背景时，底层图案不再可见。

fiddle

<style type="text/css">
body{background: red;}
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

您可以使用 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