技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

可以看到,你需要设置自己的图像文件名以及字体大小和你想要的任何其他参数。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>

demodownload

相关文章

标签: 文字  文字颜色  
x
x
  • 站长推荐