css怎么给HTML字体添加背景图
本篇内容介绍了“css怎么给HTML字体添加背景图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联公司网站建设公司,提供做网站、成都网站设计,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
先看一下最终实现的效果
如何实现这种效果
1、HTML部分代码实现
给字体添加背景图 时间也抛弃他1div>2、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字体添加背景图”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文名称:css怎么给HTML字体添加背景图
文章链接:http://scyanting.com/article/gopcpo.html