css实现文字由背景图片填充而来的

之前遇到一个文字是由背景图片填充而来的,要求如下图

看到后,也不知道如何下手,后面从网上找到一个例子,主要是运用到了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

posted @ 2017-07-03 17:37  被折叠的记忆  阅读(4115)  评论(2)    收藏  举报