其他回答《手把手教你使用css给HTML字体添加边框效果（代码分享）》中，给大家介绍了如何使用css给HTML字体添加外框实际效果。下边本文为大家介绍怎样用css给HTML字体添加背景，我们一起看看如何做。
先看一下从而实现效果
怎样在字体添加背景？
1、在html开启中，最先写div标识，在<body>和</body>正中间，输入代码<div>时间抛下他</div>。
编码实例
<!DOCTYPE html>
<html>
<head>
<title>给字体添加照片</title>
</head>
<body>
<div>时间抛下他</1div>
</body>
</html>
编码实际效果
编码输入参数，字体太小了，我想把字体放大，怎么放大？应用font-family特性设定汉字的字体效果，别忘记必须写<style type="text/css">...</style>编码实例
<style type="text/css">
* {
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，做好了～
详细编码
<!DOCTYPE html>
<html>
<head>
<title>给字体添加照片</title>
</head>
<style type="text/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;
}
</style>
<body>
<div>时间抛下他</1div>
</body>
</html>background-origin是什么意思呀？根据来给大家解释一下。
css里的background-origin特性指的是具体内容框定位背景图像有三种选值，分别是哪三种？
padding-box 内边距框
border-box 外框盒
content-box 具体内容框
词法编码
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
强烈推荐学习培训：CSS视频教学
以上就是关于一招教大家应用css给HTML字体添加背景（编码共享）的具体内容，大量欢迎关注AdminJS其他类似文章！
声明：本文为原创，版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载必须注明本文地址!
原文地址：手把手教你使用css给HTML字体添加边框效果(代码分享)发布于2023-05-30 08:00:01
