srcmini在本文中, 我们将使用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>输出如下：
评论前必须登录！
注册