3

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

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

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

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

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

4

4 回答 4

3

有点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;
    }
于 2011-10-23T11:00:19.123 回答
0

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

h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
于 2011-10-23T05:46:20.010 回答
0

当您使用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%;}

看实际<

于 2011-10-23T05:53:05.503 回答
0

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

h2:after {
  content: "";
  display:block;
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
于 2018-08-17T17:35:07.130 回答