使用 :after 伪元素重复图像

Question

我想在我的网站上添加这样的标题： http://cl.ly/0m3F0j392e0G1n0s0T34 我理想的做法是使用文本作为标题，然后在其后水平重复一个 10 像素 x 10 像素的 gif。

编辑：我应该补充一点，我想使用带纹理的背景，这样我就无法为 h2 元素设置任何纯色。

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

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

是否有任何解决方法或任何替代方法？我不想将整个标题分割为图像。我考虑过将标题浮动到左侧，然后将一个空的 div 浮动到右侧，并将 gif 作为重复的背景图像，但我认为这就是 :after 伪元素的用途，对吗？

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 元素。在这种情况下，您需要使用背景。正如埃里克所说。

但是，如果标题中文本的大小未知（也称为动态内容），那么伪元素并不是一个好的解决方法。您可以使用如下标记：

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

然后将重复背景添加到 h

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

要隐藏文本出现的部分背景，请使 span 的背景为纯色

span{background:white} 

更新：

如果您的 h1 下有一个背景图片，那么您可以执行以下操作：

相同的 HTML：

您的文本content

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%;}

查看实际操作< ;

Answer 4

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

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