CSS 设置文字的背景为图片

魏婚夫(Wee婚夫)

于 2019-08-01 17:01:29 发布

阅读量2.7k

点赞数 2

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/Vision_Pinna/article/details/98074648

版权

CSS 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

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>

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