css怎么给HTML字体添加背景图

本篇内容介绍了“css怎么给HTML字体添加背景图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联公司网站建设公司，提供做网站、成都网站设计，网页设计，建网站，PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展；专业做搜索引擎喜爱的网站，是专业的做网站团队，希望更多企业前来合作!

先看一下最终实现的效果

如何实现这种效果

1、HTML部分代码实现

时间也抛弃他

2、CSS部分代码实现

定义css样式

* {
        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放在和之间，定义样式。

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字体添加背景图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！