|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
如何使用css和圖像為文字著色
作者:admin 時間:2022-8-3 10:10:22 瀏覽:如何使用 css 和圖像為 html 中的文本著色。
一般情況下，是使用 css 設置文本顏色，但是通過這種簡單的css技術，文本也可采用圖像來著色。
下面是制作這種效果的非常簡單的css。
.text {
background-image: url('background.jpg');
background-clip:text;
-webkit-background-clip:text;
color:transparent;
font-size:150px;
}可以看到，你需要設置自己的圖像文件名以及字體大小和你想要的任何其他參數(shù)。css 樣式的前 4 行是產生效果的原因。
background-clip: text; 表示背景被裁剪成文字的前景色。
注意，下面這三行代碼共同完成文字著色效果，不能缺少其中一行。
background-clip: text;
-webkit-background-clip: text;
color: transparent;
完整代碼示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.text {
background-image: url('background.jpg');
background-clip:text;
-webkit-background-clip:text;
color:transparent;
font-size:100px;
}
</style>
</head>
<body>
<h1 class=text>WebKaka</h1>
</body>
</html>
相關文章
相關文章
x
- 站長推薦
