html框架背景怎么设置

好，接下来呢，咱们来带同学们去学习背景平铺属性的相关内容，咱们在刚才呢，已经带同学们做到了给元素设置背景图片的效果， 但是呢，咱们的背景图片啊默认呢会将咱们整个盒子的范围呢全都给平铺满，这是他默认的效果。 但是啊，咱们有时候在实际开发网页的时候呢，可能只想让咱们当前的盒子中只展示一张背景图片，换言之就是不让咱们的背景图片呢进行评估。 那么咱们如何完成右图所示的背景不平铺的效果呢？哎，那这个时候啊，咱们是可以使用背景平铺属性呢来去完成的，而咱们背景平铺属性的属性名呢叫做 faker 的杠 repty blol 呢是背景的意思， rep 的是重复平铺的意思，合在一块背景的平铺，并且呢，咱们可以使用他的简写 bgr 来快速的完成我们代码的书写 好，介绍完了咱们背景平铺属性的属性名之后，接下来老师就来带着同学们通过代码的形式来感受一下他不同取值的效果分别是什么样子的。那在这里呢，老师准备好了一个案例， 这个案例呢，咱们刚才其实已经书写过了，咱们页面中准备了一个盒子，给这个盒子呢设置了四百乘四百的宽高以及背景颜色和背景图片，那么此时咱们来去刷新默认咱们的图片呢是一个平铺的效果，那现在啊，咱们不想 让我们当前的背景图片产生平铺，那么此时呢，咱们可以使用第三个背景相关属性叫做背景平铺来去完成啊，他的属性名呢，叫做 faker 的 repit bgr 就可以了，直接回车。 哎，那怎么会发现默认呢？咱们的 vsco 的帮咱们填写了一个取值，叫做 no 杠 repit， 说白了就是不重复不平铺，咱们来看效果哦，此时来去刷新 哎，咱们会发现，当前整个盒子的范围中呢，只展示了一张背景图片，而并不是把它给铺满的，通过这个取值，咱们就能完成不平铺的效果好，那么其实除了有咱们 no 蕊 part 这么一个取值之外呢， 咱们针对于背景平铺属性来说，还有一些其他的常见的曲直，分别带同学们认识一下。那首先第一个曲直呢，叫做 repit， 他其实是默认直，说白了就是默认的水平垂直方向全都要平铺，那 这里老师把 no 和杠给删除掉，咱们再来看效果哦，伤心哎，就是默认平铺的效果好，那么咱们还可以试试。第三种曲直，叫做蕊屁的杠 x， 那这个 x 呢，他所表示的含义就是水平方向，也可以看作是 x 轴的含义。那么这里呢，咱们给同学们稍微普及一下，咱们其实在浏览器中呢，是存在一个坐标系的，那么水平向右这个轴呢，咱们称之他 为 x 轴，而咱们的外轴呢，他的方向是垂直向下，咱们称之他为外轴。那这个外轴的方向呢，和咱们之前数学中的坐标系的方向可能有一点不一样，同学们可以稍微认识一下。 好，那么这里如果同学们想让我们当前的背景图片沿着水平方向，也就是 x 轴方向来平铺呢，咱们可以写上 rep 的杠 x 就可以了，写完之后来去刷新。 哎，我们当前的背景图片呢，只是沿着水平向右的方向来去平铺的，那同理，咱们想让他垂直向下平铺，那咱们可以写成什么呢？叫做蕊劈的杠无碍就行了，表示沿着垂直方向，也就是无外轴的方向来平铺。那咱们写 上 rep 的杠五外就可以了。写完之后咱们来取刷新，此时呢，咱们的背景图片就沿着垂直方向来进行平铺了。好，说到这里呢，咱们就来同学们介绍了我们背景平铺的属性名和一些长性的取值。 当然在这些曲子中呢，咱们可能 norry pet 不平铺呢，可能会用的更多一点。那这里呢，同学们可以着重的去记一下，此时来去刷新，就是不平铺只有一张的效果了。 好，说完了咱们背景平铺属性的相关内容之后呢，最终老师来带同学们进入小阶环节。那这里呢，有两个问题。首先第一个问题，咱们背景平铺属性他的属性名是什么？同学们还记得吗？哎，对的，叫做 做 faker grond go repit 背景平铺。好，那第二个问题，咱们背景平铺属性他的属性值有哪些常见的呢？哎，同学们来回忆一下。首先让他平铺默认平铺是 repty 的这么一个曲直， 然后让你不平铺呢，是 no 杠 repit 这么一个曲直，让你沿着水平方向 x 轴方向平铺，叫做 repad 杠 x。 还有一个是沿着垂直方向平铺，也就是外轴平铺，叫做蕊霹雳杠无碍，有这么几个比较常见的曲折哦，好，说到这，咱们就带同学们介绍完了背景平铺属性的相关内容。

要解决这个问题，可以有三种方式，第一种就是不用找类编剧，用 taxi intent 文本缩进的方式，物色像素保存， 现在就是二百二乘五十，和设计稿是一样的，虽然可以实现效果，但我们不建议这样设置 tax indent 这个属性，它主要是用于段落缩进的，用在这里是不合适的。而且如果有一天让你设置右边边距呢？或者设置上边边距呢，是不是就不行了？所以我们不推荐这种方式，还是应该用 pandy， 但这样会导致元素变宽。 如果要这样用的话，我们就必须计算一下这个 vs， 在它的基础上减去盘底，如果有波段的话，还应该减去波段，这里就应该是二百二减五十一百七， 这样加上判定之后总宽度还是二百二，我转来看一下没问题吧，但这样做的话，每次都需要我们计算一下宽度和高度，总宽高减去判定减去 boder 还是有点不太方便。当然以前的话只能用这种计算方式，但有了 cs 十三之后 就有了第三种方式。至于 c s s 三，我会专门花一部分时间来讲，涉及到的东西还是比较多的。这里我们就来简单用一个 c s 三属性叫 boxizen， 它可以有两个曲子，一个 bottle box， 一个 content box， 这两个熟悉版前面讲过的边框和内容和默认字就是 content box， 也就是默认情况下，我们这里设置的宽高就是设置的内容和宽高。现在我们把它改成 board box， 就表示这里设置的宽高，设置的是边框和宽高，他会根据波段和判定宽度自动计算内容和宽度，这里我们还是改成二百二，保存来看一下 没问题吧？总观还是二百二，来看核模型那种区域就自动压缩到了一百七，这样我们写样式就不用再考虑 pand 和 body 的影响了。你看我再给大家一个边框， 无像素虚线 desk 红色，保存总宽还是二百二，内容和就被加速到了一百六乘四十，当然这样改了之后行高就需要我们计算了，要改成和内容和高度一样， 四十像素。 ok， 现在我把页面放大一点，你注意看背景颜色，灰色不太明显，对吧？我们来改一下，改成 green 再来看，可以看到背景颜色默认覆盖的是边框后，这个也是可以改的，可以通过 bank ground 可以改， 它有三个曲子， bottle box， 表示背景颜色的覆盖范围是边框盒，这也是默认字。然后还有内容盒以及填充盒，我们就改成填充盒吧，保存看到了吗？边框是没有背景颜色的，只有填充区域有，然后我们再改成内容盒试一下，就只有内容区域有背景颜色了。

如何在 html 中创建响应式背景图像？欢迎来到我们的每日前端教程。今天我们将学习如何在 html 中创建响应式背景图像，这将使你的网页在各种设备上看起来都更加美观。

本小杰我们来介绍一下 css 的背景设置吧。背景设置分为背景图和背景颜色，这节就先来看一下怎么设置背景色。和 html 不同的是， css 在原有的颜色名和十六禁制色基础上新增 加了 rgb 色和 hsl 色，这里着重介绍一下这两种新增的颜色。背景色的设置用到的 css 属性为 background color， 这便是 css 中背景色的书写视力了。十六禁制色有固定的书写方式， 以井号开头，后跟三位或六位或八位数字或字母构成。如图。按照前面介绍的十六禁制色的规则，这里的背景设置成绿色可以写第一种三位数的要求，红、绿、蓝三个位置上都必须写成一致的，类似零 零 f f 零零十一万两千二百三十三这种。第二种六位数的六位数就是正常的写法，这里就不多介绍了。第三种八位数的八位数是在六位数的红、绿、蓝加上透明度，这是三原色。接下来 是 rgb 色， rgb 色是由 rgb 函数来实现，它有三个参数，分别为红、绿、蓝、竖直由零杠二百五十五，表示颜色由深到浅。 rgb 色还有一种写法就是加透明度， rgb 函数第四个参数表示透明度，取值则是由零到一，表示由透明到不透明，默认为一不透明。这里可以看到颜色变得和前面的不一样了。接下来是 hsl 色相饱和度颜色设置， hsl 函数使用色相饱和度、 亮度来定义颜色。色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度是指色彩的纯度越高，色彩越纯，低则逐渐变灰。取百分之零至一百的数值， 亮度取百分之零至一百。增加亮度，颜色会像白色变化，减少亮度，颜色会像黑色变化。 还有一种是 hsla 函数，也就是添加了透明度的 hsl 色，原理和 rgba 一样， css 颜色基本就这些了，其他的就需要自行开发拉。

现在看下网上搜索的啊，这里博客发布的一个布局啊，看怎么实现的啊？比如这里 上中下的一蓝色的布局，然后先拿下来，全部再拿下来啊，拿下来不是说就啊复制就可以了，而是讲解一下这过程怎么实现啊。首先呢，我在这里编辑存好之后另存啊，然后浏览一下啊，另存媒 啊，这里可以拉小一点。好，然后回到这里来，打开之后啊，这个是刚刚保存的，然后右键浏览一下， 看效果怎么样。哦，原来是上面一个，中间一个，在下面一个好，那个显得就比较简单了，然后我们看一下怎么实现好，只要实现了我就把它删掉啊， 从一步步来，首先呢我来对一下这个位置啊，然后首先我要建这个代码的框架啊，换一个感叹号，然后在这里安排之前一定要注意是保存为 atl 格式的啊，然后按推普键 啊，除了这个其他内容我们可以不管他，然后这里也不管他，然后主要说内容，然后这个是样式内容，我们可以做，不是写写这个的，并不是说不能说一直往下抄，这样找完你不理解他的作用是没有用的。好，现在我们我过来这里， 在波的里面啊，打上三个啊，我过来这里三个标签啊，这个三个标签，一个是 h e a d 一啊，啊，这个标签啊，直接有这个标签，这边有什么用呢啊，还不知道啊，里面写的内容啊，这个是顶部是不是？或者是 是头部头部内容，然后还有一个是 s e c t i o n 啊，这个也是个标签啊，这里是中部内容啊，我们就主要内容在这里啊，好，然后再写一个 f o t e 啊，那个 底部了，或者脚步是不是？然后这里是啊，这里是底部内容啊，我们写这个啊，底部内容，这个头部内容啊，为了这样写啊，这个主要内容 内容区啊，好，先看一下，写了这三个标签有什么用啊？在这里刷一下啊，他只是三行字，根本大小什么都没有，和这里还写错了一点，是少了一个东西，是不是？那我们来看一下，我来看一下啊，这里是少了一个， 不小心把一个啊这个货号打扫了啊，这样呢，有时候我们在打工就会破坏一些 标签啊，必须要的啊，这些监控号啊，或者名字改错了啊，就要改过来，然后注意检查，然后再刷牙啊，已经可以了，然后怎么来实现到这个效果呢？刚才的效果呢？好，首先写完之后我们就要定一个什么，一个是 这个 id， 还有一个内容，是不是啊？这是必须要定的好内容呢？这个为什么三个都是一样 啊，为什么这样定啊？这时候是不是一个大小的问题啊？所以呢，我先定一个卡拉写，然后写什么啊？这个是伸缩了哈，准准备他是有个大小 啊，加了加上去的内名，把内名加上去啊啊，这里作为一个标示名了，到时候，然后 啊选择器在 ht y 里面写， it y l e 里面写，然后在这里写什么？把这个点写上去这样子，因为这个选择器写的是这个，但是这个是克拉斯，所以呢在这里写上点了， 然后呢写一个他怎么写的？写上一个宽度是吧？宽度九百 ps 啊，但是写完之后我再来这里刷一下啊，你是看不到任何反应的，为什么？因为他没有背景颜色，所以看不出来，所以这里呢，我加个背景颜色啊，加什么颜色呢？因为这是只是看而已是不是所以呢随便加 啊，刷了一下啊，这个有颜色了，说明九百是这么宽的好，怎么让他还有什么其他的设置，对吧？根据刚才的他用一个 mac， 那这个这是什么用啊？这个的作用是这样子的，写一个 m a r g i m 写个零是表示他上端哈第一个零啊，第一个零呢，表示 他这些内容的顶部啊，是不变的是零的。然后呢往下啊，左右两边哈，往下他自动了，那左右两边是自动， 就用了这个 autu， 那么这样自动上面是零，左右自动那就是达到居中的效果了。好， 所以再看回来啊，这样你打最终效果。但是有个问题啊，有人会认为啊，他不是零啊，为什么不是零呢？你看这里他上面这个边界还有一点点位置啊，这个怎么处理啊 啊这个是还有个知识点啊，这属于剥的里面的一个知识点啊，也可以这样子啊，心所有啊啊写一个托是零 好，这样行不行，那我们刷一下啊啊这个还没有是不是？那么怎么怎么处理这个然后呢跟这个拓是没有关系的是不是？那如果 max 呢等于零啊，试一下， 而且他就会都在最边了，这还真正是零啊，所以呢，这里要加一个这样的东西，当你说我不用 cbody 也可以，因为就是 body 本身呢，我们刷一下是不是啊？是可以的啊，所以呢要加这个，把最边的一点点空位也要处理好 啊，这是一定要注意的好，现在看来这已经做好了，然后呢高度还没有，因为他每个高度不要你们说这里加高度啊，给一个五百 啊，这样一刷下来就发现这里是五百，中间是五百，下面是五百，那都是一样啊，那不行是不是啊，实际不能这样子，因为头部竟然是比较 短的啊，不要矮的好，这时候就需要不能直接加这里来，而是又弄一个 id 好，这时我看他怎么做好，他这里设了三个 id 啊好，现在我也设三个 id 在这里打空格 id 等于，这是等于要双引号啊，写上个头是吧。好， id 头知道吗？这所以写了他写什么写在这里那高度有了吧。背颜色另外一种是不是 因为现在我是所有都是一种颜色，根本就看不出来啊啊，我再刷新一下看到没有都是一样颜色好，这时候呢因为这个是头啊， hid 只能是这个哈， 不是这个啊，这个名字是另外几件的啊，先点一下来，虽然是看起来一样啊，但是两回事啊，用啊，花括号，然后 h 一 ight 高度啊，射一个，比如射两百吧，两百 ps， 然后习惯了马上就缩进一下啊，要规范一下是不是 好，这里好像有点不规范，他这里没说够，是不是我们刷一下好，这时候他没他有问题的是不是好，这时候什么问题啊。因为他没有高度而这里呢？ head 写下去，哎，怎么不行呢是不是好，现在发现这里是 id 啊，他是不卡死啊，如果是卡拉奇这里用什么用点啊，但是现在 id 用什么啊。用的是警号了啊，就不用点啊，这个是在要注意你发现在做的时候发现他哎，怎么没反应呢，肯定是，要不这里写错了 啊，又名字没写错，要不就这点没写啊，这这是有这种情况，好，刷一下啊，这是两百好像不用这么多是不是啊，一百就可以了。一百二吧，刷一下 好，现在中间呢啊，头部是什么颜色，是不是不知道是不是看不出来。所以呢是要另外一个颜色，就颜色不能在这里定啊，一定全部是一样的啊，这时候我换一个啊，为了看得到哈，我随便换一个 啊，这时候这个好，中间那是不是同样道理啊，这里加一个 id 等于啊这个字名字起了好，这时候因为这个是 id， 所以 加井号了吧，然后划括号，写什么高度给个五百撇起颜色啊颜色我的 换一个啊啊，为了快一点我把这个连过来，然后呢在这里随便改一下颜色， 看看有没有变啊，中间这里也会变了，然后底部是不是同样道理呢。我可以这样来做 id 等于 再写一个了，是不是 f o o t 一啊，但我可以不写这个名字啊，不写这个名字，你看这个名字跟这个就不一样了。好，然后呢就写上去什么好，为了更快我就复制了，就复制这个吧，然后把这个 f oote 啊换掉，他看到没有你复制的换他不换是一样的啊，所以这要注意了。好，这时候也换种颜色吧。 好刷一下啊，这三个就出来了。好，内容呢，居中是吧。内容居中，我们在这写一下。 内容居中呢，应该是统一啊，就说用到这里来，用到这个内名里面去，然后这里写上好这个十三行，这个颜色就不要了，因为每个颜色都不一样了，都有自己的颜色了，然后这里写上内容的居中他写， 然后呢对齐方式用 ent 压好，这样就可以了，我们放大一点啊，看下这代码啊，整个过程就这样，而且我们再最后看下效果 啊，如果说上下居中呢啊，内容就上下居中啊，这个细节了，就用设计到行高了啊，这基本上的一个布局就实现了。

这节课我们学习 c s s 背景属性，假设这里有一个 div 容器，宽四百，高三百。 默认情况下这个 div 是没有背景的，或者说他的背景是透明的。我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下背景是透明的。 我们也可以给 div 添加一个背景颜色，既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。 但是由于这个 div 已经被我们设定了大小，图片呢是大于这个容器的，所以实际上我们最终看到的效果是这个样子的， 我们只能看到图片的一部分。下面我们就来看看应用 c s s 背景属性如何实现这个效果。新建一个零幺三 c s s background 文件夹， 再创建一个 c s s background， 点 h t m l 文件和一个 back ground style， 点 c s s 文件。 接下来我们打算给整个页面来添加一个背景图片。 事实上包得元素也是一个容器，可以直接给包得添加背景图片。包得容器默认水平方向上是占满整个窗口的，我们来给他添加一个高度样式定义选择器包得 声明样式 hit 百分之百预览一下效果，按下 f 十二来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度没有高度， 为什么我们设置的高度百分百不管用呢？大家注意，这里的百分百是相对于他的复元素的高度的。包对元素的复元素是 html， 这个元素我们并没有给他设置大小， 所以在包的元素前面加一个 h t m l 逗号，这样两个元素就都设置了高度， 让他们的高度和浏览器窗口大小保持一致。这时再来看一下页面，现在 body 和整个窗口就一样大了下 下面我们给 body 添加背景图片，可以通过 bug girl 的 init 属性实现。属性值为 u r l， 后面跟一个小括号，括号里面填写背景图片的路径。 回到样式代码 background， 以妹子 u r l 括号点杠，大可点 g i f。 这个图片是一张动态图片，我们来查看一下效果。为什么会出现这么多图片呢？ 我明明只是添加了一张背景图而已，原因是当我们给元素添加背景图片时，图片是以平铺的方式来展现的。什么是平铺呢？就是当我们放入一张背景图片的时候，这个图片 在默认情况下会向四周扩散，无限的进行重复，就变成了现在这个样子。当然了，容器是有大小限制的，最终我们能看到的部分呢，也就是这么多而已。 如果我们不希望这个背景图是重复的，需要使用一个新的背景属性。 background repeat 取值为 no repeat。 我们来看效果，最终就只有一张动图了。 接下来我们来修改一下，将背景图片换成另外一张图片，再来观察一下效果。 由于不允许平铺，我们只能看见一张图片。把 background repeat 属性值 no repeat 改为 repeat， 我们就看到了这样平铺的效果。在日常开发过 过程中，给一个网页或一个比较大的容器设置背景，经常会采用这样的技巧，放一张小的图片进去，只需要让他保持平铺的方式，就会得到一张无限大的图。 再回到刚才的例子，如果要求这个背景图片在页面中间显示，我们如何调整背景图片的位置呢？ 我们需要使用 background procession 属性，这个属性需要写两个值，第一个值表示水平方向上的对齐方式， left center right。 第二个值表示垂直方向上的对齐方式， top center bottle， 给 body 添加样式， back around the position center， 空格 center， 也就是水平垂直居中。大家发现图片移动到了页面的中间。 如果想将图片放到右下角，书型值该如何设置呢？你会写吗？把答案写在弹幕上吧。回到 h t m l 代码，添加一个 h e 元素和五个 p 元素，添入一些文本，再复制五份。 再回到 c s s 代码，背景图恢复为 b j， 点 p n g 图片平铺方式为 repeat。 我们再看一下效果，可以通过滚动条来查看网页内容， 仔细观察文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先挠 脑补一下这个效果。实现这个效果需要使用 background 的 attachment 属性，用来声明容器里的背景图片与内容的依附。方式，直 fixed， 图片固定直 scroll， 同时滚动 报地选择器添加样式， background attachment fixed。 再看一下效果，滚动一下页面背景固定的效果就实现了。 前面我们多次使用到了 background color 属性，它可以给容器设置背景颜色值，可以设置为颜色名称，十六禁制颜色值， rgb 颜色值等等。把背景图片的样式注释掉，添加 background color 属性值为 此时整个页面背景为绿色，颜色有点深，那我们可以让绿色变得浅一些吗？你能想到的方法应该是换一个其他的颜色值。其实我们可以通过让背景透明一些，同样可以实现这个效果。 这需要学习一个新的颜色值表示方法， r g b a 这里的 r g b 就是 r g b 颜色值， a 就是阿尔法的简写， 表示通过设置一个阿拉法通道来指定颜色的不透明度，是一个介于零到一的数字，零表示完全透明，一表示完全不透明。比如 rgba 括号，零逗号零 逗号零逗号零点五表示的颜色就是黑色，半透明。把葛润颜色名称改为 r g b a 括号零逗号二五五逗号零逗号零点一。 我们看页面，绿色的背景因为透明，颜色变浅了。为了精简代码，也可以使用单一的 back ground 来指定所有的背景属性。 可以把 body 的全部背景属性合并在 background 的属性里，注视所有代码 声明属性。 background 值可以写为颜色值。 r g b a 括号零逗号二五五逗号零逗号零点一背景图片 u r l 括号点杠 大可点 gif 平铺方式 no repeat 背景图片位置， right 空格 bottom 背景衣服 fixed 我们看一句声明，实现了全部的背景效果。 最后我们总结一下 c s s 的背景属性，有关 c s s 背景的属性我们就讲完了，其实 c s s 背景属性还有几个，我们要到 c s s 三的时候再继续学习，大家加油！

本章节我们来认识一下 html 的框架，框架可以在一个页面嵌入显示多个页面，由 e freem 标签来实现。简单来说，想要嵌入几个页面，就建几个 efram 标签，这里我们来看一下，这就是框架的基本结构了。我们把视力复制过来运行一下，看一下效果吧。 注意，这里有个浏览器不支持框架的文本，意思就是如果浏览器不支持框架，就在浏览器上显示这段文本，这就是 html 的框架的样式了。这里用的百度没显示出来，不过从提示信息可以看到 是加载了的。接下来我们来演示一下 afram 标签的属性。首先是设置框架的宽高，这里支持设置像素值和百分比，这里我都设置一下看下效果，顺便把框架页面 面改一下，这里宽度我设置像素质，高度我设置百分比。 刷新看一下效果，可以看到框架的宽高有很明显的变化。接下来是设置框架的边框是否显示，用的是 frameboard， 取值范围在零合一，零表示不显示边框，亦表示显示边框，请默认是显示边框，这里我设置成零 刷新页面，框架的边框不见了，这就是设置边框显示的属性了。接下来是设置滚动条，我们载入的页面很多都是与滚动条的， 所以框架给我们提供了一个设置滚动条的属性 scarling， 它的曲只有三个， auto， yes 和 no。 auto 就是自动， yes 是显示， no 是不显示，默认是显示。这里我设置成 no 来看一下效果。刷新一下，是不是滚动条不见了，这就是设置滚动条显示的属性了。接下来是设置内编剧的属性， martin hate 和 martin words， martin wides 表示左右那边句， martin hate 表示上下那边句。取之只支持像素纸。我们来演示一下。这里我把两个都设置成五十像素来看一下效果。 页面里的内容位置发生变化了，这就是设置内编剧了。这里还有两个属性， sanderbarks 和 refer policy。 refer policy 属性是规定往嵌入的页面里推送的信息， sandbarks 是对嵌入的页面进行设置。