当您使用content:url()
按下的类时,创建一个img
元素。你需要background
在这种情况下使用。就像埃里克所说的那样。
但是,如果标题中的文本大小未知(也称为动态内容),那么伪元素就不是一个好的解决方法。您可以使用这样的标记:
<h1><span>your text content</span></h1>
然后将重复的背景添加到h
h1{ background:'url(img/imagehere.gif) repeat-x';}
隐藏部分文本显示的背景使span
的背景成为纯色
span{background:white}
更新:
如果您的 下方有背景图片h1
,则可以执行以下操作:
相同的 HTML:<h1><span>your text content</span></h1>
CSS:
说你body
有背景图片:
body{background-image:(foo)}
那么你想bar
成为你的形象在标题之后重复。你应该做这个:
h1{background:url(bar)}
body
并为span
包含您的文本添加相同的背景:
h1 span{background-image:(foo)}
这将解决您的问题。看看这个Fiddle以了解实际情况。这不取决于您的文本大小或其他任何内容。
注意:如果您使用的是 anspan
那么您应该制作它dispaly:inline-block
更新:
根据您的要求,我重新考虑这一点。我用tables
了这个时间。代码不解释:
HTML
<table>
<tbody>
<tr>
<td><h1>Heading</h1></td>
<td class="pattern"></td>
</tr>
</tbody>
</table>
CSS
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
看实际<