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

发布时间：2021-08-13 19:07:52 作者：chen
来源：亿速云阅读：590

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

先看一下最终实现的效果

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;
}

代码效果

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

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;
}

代码效果

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

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;
}

代码效果

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

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

注意一下，如果背景不是no-repeat就属性会无效，但它会从边框开始显示。

border-box属性来了解盒模型

布局是尺寸功能，假如给新项目遇到这个问题是div宽度是100%形式，框占窗口宽度的50%，边界和内边距是用像素表示怎么办？可以使用属性box-sizing来调整框模型。也可以用border-box给框模型更改成这个新的模型。

“css怎么给HTML字体添加背景图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

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

如何实现这种效果

相关阅读