Html CSS-简单文本纹理

我需要用与此相同的方式对h1s进行纹理处理：

但我不知道怎么做

我从这个网站截图：

我有h1的代码：

h1{
    margin-top:20px;
     border-bottom-style: solid;
    border-bottom-width: 1px;
border-top-style: solid;
    border-top-width: 1px;
border-color: #333333;
font-weight:normal;
text-transform: uppercase;
font-family: 'Steelfish Rg', 'helvetica neue', helvetica, arial, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}

---

如果您已经检查了感兴趣的页面的来源，您可以看到徽标是以文本形式硬编码的

对于动态纹理文本，可以使用背景剪辑属性，目前WebKit浏览器支持该属性。还有其他可用的回退方法，这些技术在这里有详细的记录：

h1{ /*背景剪辑*/ 背景图像：urlhttp://i.imgur.com/RwVIbSX.jpg；/*将URL更改为纹理文件名*/ 背景重复：重复； 背景位置：中心； -webkit背景剪辑：文本； -webkit文本填充颜色：透明； /*其他风格*/ 边缘顶部：20px； 边框底部样式：实心； 边框底宽：1px； 边框顶部样式：实心； 边框顶部宽度：1px； 边框颜色：333333； 字体大小：正常； 文本转换：大写； 字体系列：“Steelfish Rg”，“helvetica neue”，helvetica，arial，无衬线； 字体大小：400； -webkit字体平滑：抗锯齿； }

---

标题文本对于这些文本效果，最好使用图像，而不是对其进行编码。原因在于兼容性。尽管背景剪辑值得探索，但它只与webkit兼容。出于同样的原因，更实用的解决方案是图像。

使用背景剪辑@Terry，它在IE中不起作用，但在链接中它确实起作用。提到您希望支持哪些浏览器可能会有所帮助。您是否尝试过检查感兴趣的元素？该网站显然是使用图像作为占位符，而不是文本：徽标是一个图像文件。如果你想要一个包含动态文本的纹理标题，背景剪辑可能是唯一的方法。@Terry我希望它至少在IE、Chrome、Firefox中工作。该网站做了其他事情，背景剪辑在IE中不起作用，而链接的网站却起作用。在做了一些研究并找到一个回退代码后，它会工作“ok”