css怎么给文字加背景

方法：1、用“color: transparent”设置文字透明；2、用“background-image:url("图片地址")”给文字加背景图片；3、用“background-clip: text; ”将图片和文字融合，实现文字背景效果。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

今天我们我们来看看使用CSS怎么给文本添加背景图，让文字变得生动好看！在我们想要创建一个较大的文本标题，但不想使用普通又枯燥的颜色来修饰时，非常有用！
我们先来看看效果图：

1、首先是HTML部分，定义两个标题

body>
    	h1>
    拼多多培训/h1>
    	h3>
    拼多多培训/h3>
    /body>
    

2、然后开始定义css样式来进行修饰：

body {
      display: flex;
      align-ITems: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      text-align: center;
      min-height: 100vh;
      font-Size: 100px;
      font-family:Arial, Helvetica, sans-serif;
}
    

将文字原本的颜色设置为transparent透明，然后利用background-image属性给文字加背景图片

h1 {
        color: transparent;
        background-image: url("001.jpg");
}
h3{
        color: transparent;
        background-image: url("002");
}
    

h1 {
        color: transparent;
        background-image: url("001.jpg");
    	background-clip: text;
        -webkit-background-clip: text;
}
h3{
        color: transparent;
        background-image: url("002.jpg");
    	background-clip: text;
        -webkit-background-clip: text;
}
    

ok，大功告成！下面附上完整代码：

html>
    head>
    meta charset="utf-8">
    title>
    /title>
    style tyPE="text/css">
body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      text-align: center;
      min-height: 100vh;
      font-size: 100px;
      font-family:Arial, Helvetica, sans-serif;
}
h1 {
        color: transparent;
        background-image: url("001.jpg");
    	background-clip: text;
        -webkit-background-clip: text;
}
h3{
        color: transparent;
        background-image: url("002.jpg");
    	background-clip: text;
        -webkit-background-clip: text;
}
    /style>
    /head>
    body>
    	h1>
    拼多多培训/h1>
    	h3>
    拼多多培训/h3>
    /body>
    /html>
    

推荐学习：CSS视频教程

以上就是css怎么给文字加背景的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！