霍者博客

给文本文字添加图片背景

代码如下:

<!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; 检索或设置对象中的文字填充颜色

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/700.html,标题:给文本文字添加图片背景

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。