一招教你使用css给HTML字体添加背景图(代码分享) | 您所在的位置:网站首页 › origin中怎么添加文字 › 一招教你使用css给HTML字体添加背景图(代码分享) |
之前的文章《手把手教你使用css给HTML字体添加边框效果(代码分享)》中,给大家介绍了怎样使用css给HTML字体添加边框效果。下面本篇文章给大家介绍如何用css给HTML字体添加背景图,我们一起看看怎么做。 先看一下最终实现的效果 如何在字体添加背景图?1、在html打开中,首先写div标签,在和中间,输入代码时间也抛弃他。 代码示例 给字体添加图片 时间也抛弃他代码效果 代码输出结果,字体太小了,我要把字体放大,怎么放大?使用font-family属性设置文字的字体样式,别忘需要写...代码示例 * { font-family: fantasy; font-size: 2em; }代码效果 代码输出结果效果出来了,接下来怎么给字体添加背景图呢?使用background: url()试试看看怎么做。 div { background: url(3.jpg); }代码效果图 结果用大小调整大小不管用,随着文字的大小改变怎么做?我们可以使用div盒子的大小(宽度和高度)代码示例 div { height:180px; width:710px; }代码效果 随着文字的大小的效果,我们发现这只是给div盒子添加了一个背景图,并不是给字体添加背景图,缺少了一个属性background-origin设置样式,代码示例。 background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;效果图片 ok,大功告成~ 完整代码 给字体添加图片 * { font-family: fantasy; font-size: 2em; } div { height:180px; width:710px; background: url(3.jpg) no-repeat; background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 时间也抛弃他background-origin是什么意思呢?通过给大家解释一下。 css中的background-origin属性指是内容框的定位背景图像有三种取值,分别为哪三种? padding-box 内边距框border-box 边框盒content-box 内容框 语法代码 background-origin: padding-box; background-origin: border-box; background-origin: content-box;以上就是一招教你使用css给HTML字体添加背景图(代码分享)的详细内容! |
CopyRight 2018-2019 实验室设备网 版权所有 |