CSS 设置文字的背景为图片

CSS3 - 设置文字的背景为图片

一、效果图

二、知识讲解

主要运用到了css3的background-clip和text-fill-color，注意：text-till-color:transparent是webkit内核的私有属性，所以其他非webkit内核浏览器可能效果出不来。

三、代码参考

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>文字背景</title>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    .text {
        font-size: 260px;
        font-weight: bold;
        background-image: url(bgimg.jpg);
        -webkit-background-clip: text;
        /*-webkit-text-stroke: 1px #000;*/
        -webkit-text-fill-color: transparent;
    }
</style>
<body>
    <div class="text">Wee婚夫</div>
</body>
</html>

注意：在样式中的注释部分可以参考下面链接进行学习

四、参考链接

链1：background-clip：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
链2：text-fill-color：http://demo.doyoe.com/css3/text-fill-color/