之前遇到一個文字是由背景圖片填充而來的,要求如下圖
看到后,也不知道如何下手,后面從網上找到一個例子,主要是運用到了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;
width: 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