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

转载于 2017-07-03 17:37:00 发布 · 733 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxk0301/p/7112226.html

本文介绍使用CSS3实现背景图片填充文字的效果，通过background-clip、background-origin和text-fill-color属性实现。需要注意的是，这种方法在非WebKit浏览器中可能无法正常工作。

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

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

　　效果图如下: