给文本文字添加图片背景

先看效果图片:
给文本文字添加图片背景
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>给文本文字添加图片背景</title>
<style>
h1{
    margin:0;
    padding:0 0 20px;
    font-size:180px;
    line-height:180px;
    letter-spacing:-1px;
    color:rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2NkQAU+jEh8HyB7C0wAzAFJggTgHJAAAFXuA1E5qtLyAAAAAElFTkSuQmCC);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
</style>
</head>
<body>
<h1>霍者</h1>
</body>
</html>

代码说明:

letter-spacing 设置文本文字的间距
-webkit-font-smoothing: antialiased; 让页面里的字体变清晰
-webkit-background-clip:text; 规定背景的绘制区域
-webkit-text-fill-color:transparent; 检索或设置对象中的文字填充颜色

人已赞赏
设计园地

简单的几行JS代码即可实现自动访问QQ空间功能

2018-5-26 0:17:18

设计园地

CSS3内容处理-插入连续的序号及在编号中追加文字

2018-5-26 0:17:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索