在CSS中，可以使用background-image屬性和linear-gradient函數(shù)結(jié)合使用，或者使用background-clip: text屬性和偽元素來實(shí)現(xiàn)文字的圖案填充效果。
在這個(gè)例子中，.pattern-text 類定義了一種文字樣式，并將文字顏色設(shè)置為透明。使用background-clip: text屬性，背景圖案將僅限于文字的形狀，從而實(shí)現(xiàn)圖案填充文字的效果。注意替換your-pattern-image.png為你自己的圖案圖片。
請(qǐng)確保你的瀏覽器支持background-clip: text屬性，因?yàn)檫@個(gè)屬性的兼容性可能并不廣泛，特別是在老舊的瀏覽器中。
以下是使用background-clip: text實(shí)現(xiàn)的示例代碼：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>CSS 文字圖案填充</title>
<style>
.pattern-text {
font-size: 60px;
font-weight: bold;
color: transparent; /* 文字顏色設(shè)置為透明 */
background: url('your-pattern-image.png') no-repeat; /* 替換為你的圖案圖片 */
-webkit-background-clip: text;
background-clip: text;
display: inline-block;
}
</style>
</head>
<body>
<div class=“pattern-text”>這是圖案填充的文字</div>
</body>
</html>