之前的文章《手把手教你使用css给HTML字体添加边框效果（代码分享）》中，给大家介绍了怎样使用css给HTML字体添加边框效果。下面本篇文章给大家介绍如何用css给HTML字体添加背景图，我们一起看看怎么做。
先看一下最终实现的效果
如何在字体添加背景图？
1、在html打开中，首先写div标签，在
和中间，输入代码
。
代码示例
立即学习“前端免费学习笔记（深入）”；
给字体添加图片 时间也抛弃他代码效果
代码输出结果，字体太小了，我要把字体放大，怎么放大？使用font-family属性设置文字的字体样式，别忘需要写…代码示例
* { font-family: fantasy; font-size: 2em; }代码效果
代码输出结果效果出来了，接下来怎么给字体添加背景图呢？使用background: url()试试看看怎么做。
div { background: url(3.jpg)； ｝代码效果图
div { height:180px; width:710px; ｝代码效果
随着文字的大小的效果，我们发现这只是给div盒子添加了一个背景图，并不是给字体添加背景图，缺少了一个属性background-origin设置样式，代码示例。
background-origin: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;效果图片
ok，大功告成～
完整代码
给字体添加图片 * { 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; }时间也抛弃他
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字体添加背景图（代码分享）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621360.html赞 (0)打赏微信扫一扫
支付宝扫一扫
微信扫一扫 
支付宝扫一扫 关于作者
相关推荐
-
用CSS快速创建高级模糊感的背景图像
想让你的网页页面显得高级感十足吗？想要提高你网页的阅读访问量吗？想让你的用户一眼就被你的页面吸引住吗？那么就不要错过本文啦！毕竟简单又快速的实现高级感模糊的背景图，谁都可以学会！ 废话不多说，开始正文！ 正如标题所言我们今天所要介绍的就是通过css来创建一个模糊的背景图像，适用于你个人博客页面，也适…
-
css中:not用法是什么
在css中，“:not”是选择器的一种，如果希望某个样式不作用到选择器上，可以使用:not(选择器），语法格式为“ 元素:not(元素id){属性:属性值;}”；该选择器匹配非指定元素/选择器的每个元素。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3…
-
css怎么让背景图拉伸
在css中，可以使用background-size属性让背景图拉伸，只需要给元素设置“background-size:100% 100%;”样式即可。该属性可以以父元素的百分比来设置背景图像的宽度和高度。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3…
-
利用CSS如何实现全兼容的毛玻璃效果？（代码详解）
本篇文章带大家了解一下css backdrop-filter属性，看看该属性的兼容性，介绍一下如何实现全兼容毛玻璃效果。 通过本文，你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器…
-
详解CSS content的使用机制，原来还可以这样用！
本篇文章带大家了解一下css中的content属性，介绍一下content的使用场景，希望对大家有所帮助！ 在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里…
-
CSS怎么设置字体发光效果
在CSS中，可以利用text-shadow属性来设置字体发光效果；该属性可为文本添加阴影效果，设置阴影的水平偏移量和垂直偏移量为0，增大阴影模糊的距离，即可以达到字体外发光的效果。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 在CSS中，可以…
-
css怎么把ul文字变成横向排列
在css中，可以利用float属性来把ul文字变成横向排列，只需要给ul列表的li元素添加“float:left;”样式，让li元素往左浮动即可。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 默认ul列表是竖向排列： 测试文本1 测试文本1 …
-
css技巧：怎么给图片添加蒙版（分享）
之前的文章《什么是CSS语法？详细介绍使用方法及规则》中带了解CSS语法使用方法及规则。下面本篇文章给大家分享一下使用CSS给图片添加蒙版效果的小技巧，这个技巧很实用，可以将帮助您打破网站布局的模式，只需几行代码，快来看看吧！ 添加蒙版 遮罩告诉您的浏览器哪些资产元素应该可见，这对于构建创意形状和布…
-
css如何让高度自适应
css让高度自适应的方法：1、给html元素设置“height:100%;display:table;”样式，给body元素设置“display:table-cell;height:100%;”样式即可。2、使用flex布局。 本教程操作环境：windows7系统、CSS3&&HTM…
-
手把手教你使用img标签添加图片效果（知识）
之前的文章《如何使用HTML制作一个简单美观的导航栏（代码详解）》中，给大家介绍了怎样使用HTML制作导航栏的方法。下面本篇文章给大家带了解一下img标签怎么添加图片效果的方法，我们一起看怎么做。 标签 用于定义网页中的图片，我们平常在网页中见到的大部分图片都是用这个标签定义。 代码示例： @@##…
-
CSS篇：如何将页面背景设置渐变效果（代码详解）
之前的文章《如何使用html制作一个简洁的提交表单（代码详解）》中，给大家介绍了怎样使用html制作一个表单。下面本篇文章给大家介绍怎样使用css设置背景色渐变呢，我们一起看看怎么做。 它们都可以用自己的方式表示任何颜色，只不过角度不同。 在RGB模式下，所有颜色都可以用红（red）绿（green）…
-
css的三种常用写法是什么
三种常用写法是：1、内联样式，语法“”；2、内部样式，语法“元素名{属性:属性值;}”；3、外部样式，语法“”。 CSS 1.CSS的使用方式(内联样式，内部样式，外部样式)–内联样式 语法： 标记名> 立即学习“前端免费学习笔记（深入）”； 2.CSS的…
-
css怎么同时插两张背景图片
在使用多个背景图时，首先把background-image属性的值用逗号隔开，列出需要用的图像；然后用background-repeat定义重复属性；最后用background-position定义每张小图的位置即可。 本教程操作环境：windows7系统、CSS3&&HTML5版、…
-
css3如何实现阴影效果
在css中，可以使用box-shadow属性来实现阴影效果，只需要给元素设置“box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 inset;”样式即可。该属性向框添加一个或多个阴影，由逗号分隔的阴影列表。 **box-shadow: 0px 0px 10px #9521de…
-
css怎么实现对话框
css实现对话框的方法：首先创建一个HTML示例文件；然后让父元素相对定位；接着用css的伪类before或after写个三角形；最后通过设置css样式实现对话框即可。 本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。 纯css写带小三角对话框 在实…
-
css中tr是什么意思
在css中，tr的意思是表格中的行，语法格式为“表格内容及表格元素”。tr标签定义HTML表格中的行，一个tr元素包含一个或多个th或td元素。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 标签定义 HTML 表格中的行。 tr 元素包含一个…
