CSS-简单的文字纹理

debugcn 发表于 Dev

斯拉瓦·克尼亚泽夫（Slava Knyazev）

我需要使用与h1以下相同的纹理：http : //i.imgur.com/aZk9YAI.png

但是我找不到完成的方式。

我从以下网站上截取了屏幕截图：http : //www.eminem.com/home

我有此代码的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;
}

特里

如果您查看了感兴趣页面的源代码，则可以看到徽标以图像文件的形式进行了硬编码。

对于动态纹理化的文本，您可以使用background-clip属性，到目前为止，WebKit浏览器都支持该属性。还有其他可用的后备版本，并且在此处对此技术进行了详细说明：http：//css-tricks.com/image-under-text/

h1{
  /* Background clip */
  background-image: url(http://i.imgur.com/RwVIbSX.jpg); /* Change URL to texture file name */
  background-repeat: repeat;
  background-position: center center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Other styles */
  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;
}