Question

我想在我的网站上添加标题：http://cl.ly/0m3F0j392e0G1n0s0T34 我理想的做法是使用文字作为标题，然后在其后水平重复10px×10px gif。

编辑：我应该补充说我想使用纹理背景，所以我不能为h2元素设置任何纯色。

我已经能够在标题之后添加gif但我无法重复它，即使我添加了repeat-x。这是我使用的代码：

h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}

此方法或替代方法是否有任何变通方法？我宁愿不把整个标题切成图像。我已经考虑过将标题浮动到左边然后将空的div浮动到右边，使用gif作为重复的背景图像，但我认为这是：在伪元素之后，对吧？

Answer 1

有点hacky并且会涉及将overflow-x:hidden;添加到父元素，但是应该这样做：

h2 {
    position: relative;
    padding-right: 10px;
    float: left;
    }
h2::after {
    content: '';
    position: absolute;
    left: 100%;
    right: 9999px;
    background: url(image.gif);
    height: 10px;
    width: 9999px;
    }

Answer 2

您可以为after伪元素设置任何属性。我会做什么把内容设置为“”（空）然后设置宽度和高度为伪元素。您可以像往常一样将背景设置为重复的gif。

h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}

Answer 3

当您使用content:url()按下的类时，请创建一个img元素。在这种情况下，您需要使用background。就像Erik所说的那样。

但是如果标题中文本的大小未知（也就是动态内容），则伪元素不是一个好的解决方法。你可以使用这样的标记：

<h1><span>your text content</span></h1>

然后将重复背景添加到h

h1{ background:'url(img/imagehere.gif) repeat-x';}

隐藏部分背景，文本apears使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 以查看实际操作。它不取决于您的文字大小或其他任何内容。

注意：如果您使用的是span，则应将其设为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%;}

<强> See in action<

Answer 4

如果您添加“ display：block”声明，则来自Erik Hinton的上述答案将起作用，如下所示：

h2:after {
  content: "";
  display:block;
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}

使用：after伪元素重复图像

4 个答案: