如何使用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>

【如何使用HTML和CSS在文本背景中添加图像（）】输出如下：