之前的文章《手把手教你使用css给HTML字体添加边框效果（代码分享）》中，给大家介绍了怎样使用css给HTML字体添加边框效果。下面本篇文章给大家介绍如何用css给HTML字体添加背景图，我们一起看看怎么做。
先看一下最终实现的效果
如何在字体添加背景图？
1、在html打开中，首先写div标签，在
和中间，输入代码时间也抛弃他。
代码示例
立即学习“前端免费学习笔记（深入）”；
nbsp;html>给字体添加图片 时间也抛弃他1div>代码效果
代码输出结果，字体太小了，我要把字体放大，怎么放大？使用font-family属性设置文字的字体样式，别忘需要写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，大功告成～
完整代码
nbsp;html>给字体添加图片 * { 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; }时间也抛弃他1div>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字体添加背景图（代码分享）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2872218.html
赞 (0)关于作者
手把手教你怎么使用CSS3实现动画效果（代码分享）上一篇 2025年3月10日 18:41:21php 爬虫框架有哪些下一篇 2025年2月18日 06:20:02AD推荐 黄金广告位招租... 更多推荐
相关推荐
如何使用CSS创建波浪背景？
在这篇《用css快速创建高级模糊感的背景图像》中给大家介绍了使用css快速创建高级模糊感的背景图像的方法，感兴趣的朋友可以去了解一下~ 那么本文咱们再给大家介绍一种用css快速实现波浪背景的方法，保证让你的页面拥有个性的背景，当然还有什么想…
手把手教你使用css给文字添加火焰效果（代码详解）
之前的文章《一招教你使用html给图片添加边框效果（代码详解）》中，给大家介绍了怎么使用html给图片添加边框效果。下面本篇文章给大家介绍怎么使用css给文字添加火焰效果，我们一起看看怎么做。 打开HTML代码软件，建立一个代码 1、这儿来…
手把手教你怎么使用css3给文字添加动画效果（附代码）
之前的文章《手把手教你使用css给文字添加火焰效果（代码详解）》中，给大家介绍了怎么使用css给文字添加火焰效果。下面本篇文章给大家介绍怎么使用css3给文字添加动画效果，我们一起看看怎么做。 在这类网站中能看到，无论是文字还是图片，都随着…
手把手教你使用css制作一个简单的心跳效果（代码详解）
之前的文章《手把手教你怎么使用css3给文字添加动画效果（附代码）》中，给大家介绍怎么使用css3给文字添加动画效果。下面本篇给大家介绍怎么使用css制作一个简单的心跳效果，我们一起看看怎么做。 ccs制作一个简单的心跳效果的方法，添加一个…
很实用！CSS实现在单击按钮时显示按下的动态效果
在上一篇《如何用css快速创建3点加载动画》中给大家介绍了如何用css创建3点加载动画效果，感兴趣的朋友可以去阅读了解一下~ 本文将给大家介绍在前端设计过程中非常实用的一个动态效果，就是在单击按钮时显示按下的动态效果，光说可能大家还不明白是…
教你用CSS绘制一个带有渐变边框的圆！
在上一篇《用html/css制作有趣的动态波浪形文本行》中给大家介绍了如何用用html/css制作动态波浪形文本行，感兴趣的朋友可以去了解一下~ 本文将继续给大家介绍怎么用css实现一个带有渐变边框的圆。 首先我给大家简单说一下实现思路：我…
如何使用CSS动态调整旋转半径？
在之前的文章《教你用css绘制一个带有渐变边框的圆！》中给大家介绍了如何使用css绘制一个带有渐变边框的圆，感兴趣的朋友可以去了解一下~ 那么本文的重点内容则是教大家如何使用css调整旋转半径。 在CSS中，我们可以使用CSS自定义属性(变…
利用css制作有趣的文字摆动动画特效
在之前的文章《超实用！利用css3将两个图片叠加在一起显示》中，我们分享了两种利用css3将两个图片叠加融合在一起显示的特效。这次我们给大家介绍一下利用css如何制作文字摆动动画特效，感兴趣的可以学习了解一下~ 文本文字是网页中最常见的一种…
使用CSS快速更改PNG图像的颜色（两种方法）
在上一篇《如何用html和css制作玻璃/模糊效果？》文章中给大家介绍了用html和css制作玻璃/模糊效果的方法，感兴趣的朋友可以阅读了解一下~ 本文将给大家介绍如何使用CSS快速更改PNG图像的颜色，这也是日常开发中比较常见一个效果实现…
炫酷！CSS创建响应式堆叠卡片悬停效果
在上一篇《使用css快速更改png图像的颜色（两种方法）》中给大家介绍了怎么使用css快速更改png图像的颜色，感兴趣的朋友可以去看看~ 本文将给大家介绍一种炫酷的效果，就是用CSS创建响应式堆叠卡片悬停效果。到底是什么样的效果呢？我们继续…
