本篇内容介绍了“css怎么给HTML字体添加背景图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
先看一下最终实现的效果
如何实现这种效果
1、HTML部分代码实现
<!DOCTYPE html>
<html>
<head>
<title>给字体添加背景图</title>
</head>
<body>
<div>时间也抛弃他</1div>
</body>
</html>2、CSS部分代码实现
<style type=text/css>定义css样式</style>* {
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;
}将CSS放在<head>和</head>之间，定义样式。
background-origin是干什么用呢？属于设置元素背景图片的原始起始位置。
background-origin用语法
1、border-box
#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:border-box;
background-repeat:no-repeat;
}代码效果
2、padding-box
#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:padding-box;
background-repeat:no-repeat;
}代码效果
3、content-box
#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:content-box;
background-repeat:no-repeat;
}代码效果
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
注意一下，如果背景不是no-repeat就属性会无效，但它会从边框开始显示。
border-box属性来了解盒模型
布局是尺寸功能，假如给新项目遇到这个问题是div宽度是100%形式，框占窗口宽度的50%，边界和内边距是用像素表示怎么办？可以使用属性box-sizing来调整框模型。也可以用border-box给框模型更改成这个新的模型。
“css怎么给HTML字体添加背景图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
