如何使用HTML和CSS在文本背景中添加图像？

在本文中, 我们将使用HTML和CSS在文本背景中设置图像。要在文本背景中设置图像, 请使用一些CSS属性。

HTML代码：HTML代码用于创建主体的基本结构。在下面的代码中, 我们将使用段落标签来编写文本内容。

<!DOCTYPE html>
<html>
  
<head>
     <title>
         How to Add Image in Text Background
         using HTML and CSS ?
     </title>
</head>
  
<body>
     <p>srcmini</p>
</body>
  
</html>

CSS代码：CSS属性用于将图像设置为文本中的背景。 background-image属性用于将图像设置为背景。 -webkit-text-fill-color属性用于为文本提供透明颜色, 背景图像将通过文本显示, 从而完成剪切效果。

<style>
     p {
         background-image : url (demo.jpg);
         background-repeat : repeat ;
         -webkit-background- clip : text;
         -webkit-text-fill- color : transparent ;
         margin-top : 200px ;
         font-size : 120px ;
         text-align : center ;
         font-weight : bold ;
         text-transform : uppercase ;
         font-family : 'Steelfish Rg' , 'helvetica neue' , helvetica , arial , sans-serif ;
         font-weight : 800 ;
         -webkit-font-smoothing: antialiased;
     }
</style>

完整的代码：在本节中, 我们将结合以上两节以添加图像作为文本背景。

<!DOCTYPE html>
<html>
  
<head>
     <title>
         How to Add Image in Text Background
         using HTML and CSS ?
     </title>
      
     <style>
         p {
             background-image: url(demo.jpg);
             background-repeat: repeat;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-top: 200px;
             font-size: 120px;
             text-align: center;
             font-weight: bold;
             text-transform: uppercase;
             font-family: 'Steelfish Rg', 'helvetica neue', helvetica, arial, sans-serif;
             font-weight: 800;
             -webkit-font-smoothing: antialiased;
         }
     </style>
</head>
  
<body>
     <p>srcmini</p>
</body>
  
</html>

输出如下：

来源：

https://www.srcmini02.com/68391.html

猜你喜欢