网站建设资讯

NEWS

网站建设资讯

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

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

创新互联公司网站建设公司,提供做网站、成都网站设计,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!

先看一下最终实现的效果

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

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

如何实现这种效果

1、HTML部分代码实现




给字体添加背景图


时间也抛弃他

2、CSS部分代码实现

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

代码效果

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字体添加背景图
标题路径:http://njwzjz.com/article/gopcpo.html