之前遇到一个文字是由背景图片填充而来的,要求如下图
看到后,也不知道如何下手,后面从网上找到一个例子,主要是运用到了css3的background-clip;background-origin还有text-fill-color,由于是css3的,所以有些浏览器不支持,而且text-till-color:transparent是Webkit内核的私有属性,所以其他非webkit浏览器可能不行.
我使用的背景图片是下面的;
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* {
font-family: fantasy;
font-size: 1.8em;
}
div {
height: auto;
auto;
background: url(true.jpg) no-repeat;
background-origin: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<body>
<div>高高高</div>
</body>
</html>
效果图如下:
转载来自:http://www.qdfuns.com/notes/17578/22f14071463dbc81829e6fa4b36bcb20.html