Web前端网页制作初级教程 23.背景属性 学习猿地原创

好，那我们再来上课，那么这节课呢，我们再来看一下我们的背景属性啊，那背景属性呢，我们用的会比较多啊，那咱们来看一下，我把它先复制一下，然后在这里边一样，我们新建一个我们的这个文件，叫做零八背景属性。然后。好。那么第一个是背景颜色，这个背景颜色在之前我们一直都在使用，对吧？比如说这里边我们也设置一个ID，等于一个Y，然后呢，在这块呢，我们给它来个style，然后给它设置一个Y，给它设置一个背景颜色，那B也是一个加UD background color对吧？设置任意的一个颜色，那么一样颜色的取值可以使用这种英文单词的方式啊来你看。有效果吗？没有对吧，为什么呢？因为这个div里面什么东西都有，对不对，来咱们随便给一个叫做这个背景。属性啊。你看这个是不是就有了，哎，这就是咱们的这个背景颜色啊，那么我可以使用这种英文单词的，我也可以使用什么RGB格式的background Co，比如说RGB好了，然后给的什么给的，比如说25500，对吧，这表示什么颜色，红色吧，哎，再来刷新。

你看是不是红色背景对吧，我也可以干嘛呀，我也可以再去使用这个BA background color叫做井号啊，叫做呃F00F吧啊蓝色来。刷新，你看背景颜色是不是变蓝色了，哎，也就是说之前我们在这个讲字体颜色的时候，可以用哪些设置值的方式，在背景颜色里边也都支持啊，也都支持啊，这是第一给他的背景颜色，那么给完背景颜色以后，我还可以干嘛呢？我还可以设置背景的图片。好的。咱们再往下来看，这里边可以设置什么背景图片，那么设置背景图片，这里边我先给这个元素一个宽高啊，比如说宽度我们给他一个500，然后呢，高度我也给他一个500像素啊，然后现在我们再给他一个背景颜色，咱杠Co Co对吧，给他一个什么颜色呢？给他一个这个pink粉色，好，那现在我们来看。

刷新这是不是有一个500乘500的这么一个元素，对吧，那么咱说了，我想给他设置一个什么，设置一个背景图片，那设置背景图片我得有图片才行，对吧？我去先去找图片去啊来这里边我们找一张图片，比如就找这个PP吧。来，我给它复制一下，复制到我们这里边，我们新建一个目录啊，叫做image。没错，好了，有了这一问目录，以后在这里边我们给它粘贴过来，右键粘贴。给它改成叫a.GBG，好重构来，你看在这里面是不是有个a.GBG了，对吧？那么接下来我要想去设置背景图片，怎么设置一样back image冒号UR图片地址，图片地址在哪呢？在我当前点到当前目录下是不是有个image目录，那就image image下边是不是有个叫a.GPG的，哎，好了，那么设置完以后，现在我们再来看。

刷新你看是不是有这个图片了，当然啊，这个图片的大小它是没有背景图没没有背景框到这么大了，所以它会干嘛会沿着水平方向和垂直方向都什么都进行重复，对不对，那我能不能不重复呢？也可以，我在这里面通过什么，通过B加杠repeat re，为什么呢？为no repeat，干嘛设置它不重复，那现在你再来看刷新，诶是不是就剩这一张了。对吧，那这一张，因为这一张图片它就是这么大，对吧，它就是这么大的一张图片，所以呢，在它后面的这些是不是都显示了原来我的背景色了，对不对？哎，那么再往下来，那我能不能让它沿着只沿着一个方向重复呢？也可以，那叫be加，但高的杠repeat还是re，那干嘛呢，沿着比如说repeat-X沿着什么沿着X方向重复，那现在你来刷新。你看是不是水平方向重复了对吧，我能让它沿着水平方向重复，我也可以，干嘛让它沿着垂直方向，咱勾的杠。

P的等于什么呀？等于这个P的Y，那你看这个时候是不是上沿着垂直方向进行重复对不对，当然啊，我这个属性会覆盖到这个属性的，所以它不好使啊，我把它注释掉了啊，来刷新，你看是不是一样的哎，那能不能在还原成默认就既沿的水平又沿的垂直呢，也可以，那这里面的取值就要变化了，变成什么BGR勾上的杠re，变成什么repeat。啊，直接是P的蕊，P的就是什么沿着水平和垂直都重复的啊，这就是咱们这个图片。啊，背景图片是否重复啊，那我一样给它开启no repeat，让他设置什么不重复啊，不重复好了，那咱们看笔记这里边我没有记啊，图片这里面直接冒号URL对吧？然后这里边你看还有个颜色值是是什么透明色啊，但是我们给它设置透明色，我们就看不出来了，因为它是透明的对不对，所以在这里对，比如说我们设置背景颜色，这里边要是给他一个transparent啊，这就代表透明色，那你看刷新。后面什么都没有了，看到了吧，哎，就看不出来东西了啊，但现在呢，我还没办法给他大家演示透明色，所以呢，这里边有你知道有个透明色就可以了啊，这里边给的是图片地值啊。

图片地址，然后背景图片重复呢，有这么几个值，Rep是什么呀？是默认的，默认的对吧，水平和垂直方向。都重复。都重复。啊，然后再往下来。然后还有什么呢？还有这个叫做呃，Repa-X，这是盐。水平方向。重复对吧？Re pet-Y呢，就是E垂直方向重复。重复，然后还有一个什么呀，Re no repeat，写错了啊，No re，这什么呀，叫做不重复不重复。不重复啊好，这是咱们常用的这些纸啊，那么另外还可以干嘛呢？我还可以设置背景图片的大小，你看现在背景图片，哎哟，不行。

颜色没恢啊恢复回来了，来刷新好了，现在你看背景图片是没有我这个。当前这个元素这么大了对不对，我能不能让它跟我当前元素一般大呢？也可以了啊，那么我来设置它的大小，BK加UD background杠杠什么呀，SS设置它的大小啊，比如说在这里面我直接给它一个什么凹凸对吧，怎么样自动怎么现在刷新你吧，有变化吗？没有对吧，原来图片多大它就多大对吧？那我可以怎么办呢？我可以设置它水平的位置100%，垂直的位置也是100%，当然这样会强制拉伸图片对不对，那现在来刷新。你看是不是我这张图片会跟我背景图一边大了，对不对，由于这张图片的这个背景色啊，这个图片的背景色也是白色，所以我们看不出来效果了，对不对？哎，那么这个时候我们可以干嘛呢？比如我给了一个边框，BD1像素实现的红色边框，来你再来看刷新。

你看这个图片跟我背景图一般大，对不对，哎，然后再往下来，那我能这么去给值啊，就是给他百分比对不对。那么一般咱们给百分比的时候都怎么给的？比如说我第一个给百分比了，第二个我就给自动了，这样的话不会强制拉伸的。看到了吧，它是等比例在出发，看到了吧，如果说你这个要么你就第一个给他自动，第二个给他什么，给他百分比也可以看到了吧，来刷新。是不是那样的，哎，因为它高度高了，那这个宽度肯定就是自动的了啊，所以这里边我们在用的时候，你直接给一个自动不行，你如果给两个凹凸凹凸行不行呢？也它是不行的，凹凸凹凸来。手机。你看是不就默认大小了，哎，所以你要给他一个一个值，这边这个值，比如说给他对应的百分比，那剩下的给他干嘛让它自动才可以啊。好了，那能这么去做还可以干嘛呢？我还可以直接将背景图放大啊，叫做BD，叫做呃，出来。SI等于什么呢？等于Co v压啊，你看它是什么意思啊？

刷新。你看是不是直接将背景图放大来填满整个容器，对不对，它是什么？这也是灯比例的，哎，进行灯比例的啊，那么另外呢，还有一个跟它相反的叫什么呢？叫做connect，呃，Connection con connection来，你再看它的效果走你。诶，你看它是怎么样，它是不是就跟刚才我给的100凹吐是不是一样的，对不对。在一个格杠size，我把这几个用过的值我都写上啊，Co。植入1万对吧，它相当于什么？相当于水平方向给了什么，给了他一个100%对不对，哎，然后这个不对，是相当于这个垂直方向给了100%对吧，然后水平方向它自动，而这个呢，相当于什么？正好相反的是水平方向给了100%，垂直方向给的是自动效果，对不对，哎，这就是咱们这个。背景图啊，这就是咱们背景图的这个大小啊，那一般呢，我们给这个。

百分比的啊，会比较多啊，百分之多少都可以对吧，从0%~100%啊，一般用这个比较多啊好了，那背景的大小我们看完以后来我们再来看什么呢？再来看这个背景图的定位啊，背景图的定位这是一般都是相对于什么，相对于外层容器的，那你看好了，我当前背景图在这对吧，我现在给它放大了吗。呃，没有对吧，我们不要给它放大来让它缩过去好了，在这我能不能让背景图在我的正中间显示呢？也是可以的，那这个时候我们可以怎么办呢？在这里边通过BD杠，Po SI等于什么呢？等于center。Center啊，这个时候咱们来看我的背景图，就在我的正中间显示了，看到了吧？哎，那么一样，我能不能让它在这个右上角来显示呢？也可以，那如果要在右上角显示的话，那我的位置就要变化了，对吧？Background position右上角，那解决水平位置是什么？Right，垂直位置呢，是pop，那这个时候你再来看走你是不是右上角了。

对不对，那一样，那左下角呢。是不是就是BCKGRD杠，嗯，Posi position要是左下角的话，是不是left button对吧？哎，水平位置是left，左侧垂直位置呢，是button底部对吧？刷新你看是不是左下角对吧，那一样左下的居中呢，那左下居中的话，是不是就是一个给它。这个。呃，B加D。这个啊，不能叫左下居中，应该叫下面居中对吧？那就是水平位置是分，而它要靠底部对吧，垂直位置靠底部，那这个时候你们来看就是不是底部居中了对不对？哎，同样顶部居中的话，那就是什么？那就是top center center top对不对？哎，就center后面给的top是不就顶部居中了。等于什么呀？来刷新，你看是不是到这里边来了，对吧，同样比如到右侧居中，你想让它到右侧居中的话，比如说这里面到右侧是background position，等于right，然后给他一个center，哎，那这个时候来看刷新，这么右侧居中看到了吧，哎，那如果是中间居中，中间居中，因为两个它都是center position。

垂直位水平位置center，垂直位置也是center，所以刚才我写了一个center，它也是可以识别的，对不对，你看现在是不是居中了，哎，刚才我设置数设置一个center对不对，也就是说它们两个都为center的时候，我们可以干嘛只写一个值啊，这就是他咱们定位常用的这个。单位啊，那咱们来记一下啊。这里边，嗯。对吧，这个大小呢，我们可以也可以记一下啊，可以取值是什么百分比。百分比对吧，和auto two还有什么，还有这个叫做呃，Co VR啊，以及这个con contention是吧，Con啊，这几个取值啊，然后这个呢，这里面刚才我们也说过它。

叫做啊。嗯，BC加D-OA po，哎，这个我们用的非常多啊ton，呃，它的这个格式应该是水平位置，先在是水平位置对吧，空格垂直位置，那么另外一种格式呢，它可以直接省略写一个对吧？但是只有这个水平和垂直相同的时候啊，叫水平和垂直位置。水平和垂直。位置啊，然后呢，这个水平和垂直位置的取值啊，都有哪些取值，一种是英文单词的，英文单词呢，水平呢可以取left center以及IG right对吧，垂直的呢是top，然后以及是这几个字，哎，那么能给它还能给什么，还能给长度单位。长度单位啊，也就只要是长度单位即可，但是我们常用的啊，常用一般给什么呢？常用的都是像素PX啊，那咱们来看长度单位啊，比如说现在我们什么都不设置了，让它还原一下啊，现在是还原了诶。

来这里边换了对吧，换完以后我们看从长度单位啊，比如B加用那background position对吧，我说你距离左边我让你为20或者50像素对吧？距离顶部呢，我让你为多少也为100像素，好了，那现在你来看这个，我再来刷新。你看这边50，这边是不是100对吧，同样我们也可以干嘛呢，为了做测试证明我们是真的。是这些，咱们来量一下，你看是不是100。算了吧。到这是不是100啊，对不对，哎，这是没有问题的啊。好，那我给他退出了啊，那也就是说我可以通过像素来进行什么进行这个图片呢移动对吧，那么一样，那比如说我想要我想要图片往左边移呢，图片要往左边移，是不是就负50就可以了，对不对，那这个时候你看走，你看是不是负50了，看到了吧？哎，那一般啊，我们在做图像定位的时候，都什么时候来做呢？我们会有一些图叫做什么呢？叫做雪碧图，什么叫雪碧图呢？就是在一个网站中，它可能有多张图片啊，有多张图片来我访问一下啊，比如说我们来访问一个这个京东。

多张小图片，那么最终他把这些多张小图片都干嘛呢？都放到一个大图里边，因为最终我加载一次大图，是不是把所有小图片都加载了，如果小图片很多的话，那我是不是要加载个N多次才可以，对不对，哎，所以呢，这种图呢，我们会叫做雪碧图，那么我们来找一下，我给大家看一下啊，我的网我切一下网。咱来看啊，我不用它啊，我再去我自己打开用谷歌用那个火狐来看啊，火狐可以直接把图片下下来了啊。然后在这里边我们去找找什么呢？找3W点京东点com啊，其实它这里面有很多都是这种雪碧图啊，你看比如现在进来这个页面对吧，然后比如说你看这这个。

右侧这里边啊。这块内容这些这些图图片是不是都都有小图片吗？哎，其实这些现在我们会采用怎么采用自己图标。在治理图标呢，我们在这个在第二阶段会给大家讲解，但是呢，在没有自理图标之前呢，我们怎么用呢，都是用这种图片雪碧图啊，你看好了，我在这里边直接找个空白地方有一个什么呢，查看诶邮件。嗯嗯，变成照片了啊，来找空白的位置，来有一个什么呢，查看。图片信息，那我点到图片上了吗。就我查看页面信息看到吧，页面信息里面有个媒体，媒体这里面就是你看所有的图片，它都在这里面能显示出来，看到了吧？哎，那我们去找一下啊，看看能不能主要看背景的。来，你看这个背景，这就是一张雪碧图，看到吗？他干嘛呀，是不是把多个图片都给我加到到一起了，对不对，最终我只需要下载这一张图片，比如说我先下载一个啊。

一会我们还再找啊来，比如说这里。3W下边。Online下边零一下边LESSON3IMAGE，好了，给他过来啊，OK。再来看啊，这里面还有。这个他没有，这个他没有给我们切对吧，他都给干嘛单独的这张图片了，是不是，哎，他这个应该是用的是自自己的图标了啊嗯。我们坏了。你看这里面是不是就有，你看他把所有的这些小图都干嘛，都融到这一张大图里边来了，看到了吗？那最终我是不是只下这一个大图，就会把所有的小图都加载过来，对不对？哎，这就是雪碧雪碧图的特点啊，那么再往下来，咱们刚才看还有一个还有什么这上面你看这里边，这里边你看它展示在哪呢啊，它展示在哪来往下来。你看。看到最底下。

看到了吗？就这些东西来你对应的对比一下诶。怎么又给我加载了。写下来了啊，看最底下是不是这些内容啊，对吧，这些内容所对应的是不是他们这些东西，你看网站举报APP下来是不是这些玩意儿，哎，所以说咱们这里边我也可以干嘛，也可以通过它来做这样的一个效果，这些是不是就是各种图片的定位，整个它是一张背景图，对不对，咱们把这个存下来啊，咱们就做这么一个效果。嗯。图片。另存为。PNG。啊，因为它这块不是显示的PNG吗？看到了吧，哎，来。拿过来我们上我们自己的这个目录里边里面积这里边来是有这个，我们也给它改个名就行了呗，比如说这个叫做A的PNG。你看。这是不是这几个。提的图标对吧，往下一张是不是就是这几个图标，哎，那OK，我们就做这么一个东西啊好了，那咱们来看。

把这个新建一个呃，HTML的文件对吧，叫做零九啊背景图，背景图定位练习好了，然后这里边我们首先首先我们得做出那么大的一个效果才行，对不对？比如这里边我们给个div这么一个元素对吧？在div里面呢，我们给他一堆盘标签，然后给他一个或者是给以面积标签也可以对吧。直接给他这个算了，就给死SPA标签啊，死判标签，死SPA标签的话应该是。不行。啊，什么表签应该是不行，因为我们最终是用的是背景图对吧，那算了，我就先给一个div吧，啊，我就先给div。来给个div，然后在这里边我们给它来设置一下啊，比如说这个呢，咱们就叫这个BOX1啊，ID等于u box1好了，然后在这里边咱们给他一个style标签，然后找到井号BOXS1，然后给他宽度，我瞎给到啊100高度，比如说给他一个50对吧，然后呢，我们先给他一个背景颜色啊b control color为红色，那现在你看我的页面中是不是就有这么一个。

个容了，示背景里B示该当前目录以面积下边以面积下边叫什么名来着，叫叫做index的PNG是不是这张图片，那现在咱们来看刷新，诶图片是不是过来了。对吧，哎，过来以后那没问题。那那这是第一张图片，我们也一会儿也按照它的顺序啊，它的高度肯定没那么高了，对吧，那我们就需要把这个高度给它缩小一点啊来咱们检查一下。看我怎么检查了，怎么检查对吧，检查以后咱们看看这块是不是有高度啊，高度我再减小减小，你看每次我在减小，它是不是也对应在小啊，按上下键就可以了啊。好，就这样得多三十一三十呢，就赶紧给他30了啊，这个图片我就给他30了，那OK，它的高度就是30，好，那么接下来再往下来还有什么，我是不是不光这一张图片呢，现在光定位一张，这没问题，对不对。

你要看好了，在人家这里边有多少张图片。这呢啊，人家是不是有一堆对不对，哎，那咱们来看我的第一张是什么，呃，哎呦还不对呢，我第一张应该显示的谁呀，显示的是不是可信网站信用评价。对不对，哎，这是经营性网站的备案，这是哪个经营性网站备案。有吗？这里没有这张对不对，哎，那挺好啊，这里没有看好了，那这不是我们就需要定位了，那需要定位的话，这个时候你来看好了，来。我们第一个显示的是不是他，但是我需要的是谁可信网站信用评价是不是他啊，是不是显示它，那也就是说这个东西我就开始干嘛，是不是要开始去移动图片了，那么移动图片怎么移动呢？来咱们看好了，我在这里边打开，用画图方式打开啊。

比如说啊，当前是这个样子的。来。我这块诶。我这块是一个元素对吧，是一个元素以后接下来呢，咱们背景图定位，定位的时候是不是默认是不是就是这样的一个效果，对不对，哎，它这里面显示的是它，那么咱们选择是不是显示的它呀，显示这张图片，所以我是不是要把这个图片往左边去移动。移动这么多，移动这么多以后，是不是才看到了这个可信可信网站评价对不对，所以往左边移动值是不是就赋值啊，所以我就需要看这张图片，它的这个位置到底是在哪块对不对，那咱们来看啊，我把鼠标。放到这里。多少啊，是不是104对吧，你要看底下的坐标啊，底下的这个坐标是不1043，那么咱们往左边移动是不是就是负的104啊，所以在这块我需要给他做一个什么定位吧，Psi。对吧，等于什么呢？等于左边是负的103PX对吧？垂直呢，又动了，垂直不需要，垂直暂时不需要，那现在我们来看。

刷新。可信网站信用评价没问题了，对吧，那也就是说现在我们第一块是不是就搞定了，你看对应第一块搞定了第二个网。做警察对吧，那一样啊，我们再来一个div。Div ID叫做fo r啊。等也一样，井号不括四二，咱们还是给它宽度也为100，高度呢也为30啊，然后背景颜色我就不需要了，我就直接定位背景图片对吧？诶错了，这里边B个ground你定位背景图片。URL等于什么呢？等于当前目录以image下边还是叫以对吧，哎，把它拿过来以后，现在我们先不做定位啊，它默认肯定还是显示第一张对不对。在这第一张看到了吧，哎，但是我需要显示谁呀，我是不是需要在这个div里边显示的是什么，那个警察那块东西，对吧？网络警察提醒您是吧？那咱们再来看这个图片，王德强听见您在哪儿呢？是不是在这呢？对吧？那当前元素，比如说当前元素在这显示的啊。

那你看当前元素现在是不是这么显示的，我要想显示网络警察，是不是它要向上移动这么多，那向上是不是也是负值。对不对，哎，那只要是负值，那OK，那这个时候我们就可以干嘛，可以去定位到它对吧，那也就是说在这里边。我的这个水平位置需要移动吗？不需要了，对吧，那垂直位置呢，是需要移动的，移动多少还不知道对不对，我们需要去量一下，那在这里边咱们还找这个图片鼠标放到这儿。这块坐标多少？35，三十五三四对吧，那OK，我在这块就给你付了34。负的。34PX啊，让它向上移动，好，那这个时候我们再回来刷新。

你看网络警察是不是过来了，哎，过来以后再来，我们还有第三个div对吧，那再来div。ID等于BO3，哎等于BO3，然后这里边我们干嘛呢？这里边不能每次都去写他仨呀，对不对，那我就直接简单点写啊，一个div对吧，也就所有的div宽高都是这些。哎，然后你背景图都是这些，那现在我们来看可不可以啊来刷新。没问题对吧，又增加又增加了一个，增加一个，这个时候这个div应该显示的是谁了，看看啊嗯。拉到最下边来。拉到最下面来，这边显示谁了，应该显示的是，呃，网上有害信息举报专区是吧。这个叫这个我写的对吗。不对，是诚信网站。啊，应该显示诚信网站了啊，那看诚信网站在哪呢。

在这对吧，那么显示诚信网站是不是应该它向左边移动移动这些，然后再向上移动，移动这些是不是才能显示这个诚信网站。对不对，哎，所以这时候它不管向向左还是向上，那咱们把鼠标放到成绩网站这里，你看这个时候它的地址多少，地址是不是幺三零幺零三三十五是不是都是负的，一个向左一个向上吧，哎，所以这里边。那我们继续。找到。我就说BOOK3纳对吧，井号布三直接给他一个background position进行定位对吧？水平呢是负的103PX垂直呢是多少来着。三四。PX。负的34PX，好了，那现在我们再来看刷新。信这个诚信网站走不过来了，哎，好了，诚信网站完事再往下写，还有谁？这里面再继续div井号叫BO4的。BO4了啊，那同样BO4你看是谁啊，再往下来找，这里边是网上有他信息举报对吧？那我们再去找这张图片，网上有他信息举报，是不是他这个呀，那也就是这张图片是不是当前这张图片网上有信息举报，是不是往上移动，移动到这儿是不是就能显示了，对不对？哎，那他要往上移动多少呢？那咱们鼠标放到这里边看一下移动是多少，71，其实也不用71，咱们去掉两个34是不是就是对的，对不对？哎，所以在这里边我应该什么应该是。

井号BOX4，给它back position等于水平位置不需要动了，对吧？而垂直位置是两个负的34，那也就是60。八对吧，68PX。68PX好了，那这个时候我们再来看可不可以啊来刷新。诶，网上信息有害，举报是不是过来了，哎，过来以后，那再往下井号波克斯还有五呢，对吧，那五是谁咱也不知道呢，那我们再来看一眼啊来div井号BOX5。还是一样。我们找到。

包括是五是谁啊，网上举报什么APP是吧，那来看网上举报APP是不是这个对吧，那这个你看你看现在我先干嘛，是不是先默认显示是这张对不对，我先往这边移动，移动这么多，然后再往上移动，移动这么多是不是这样的，哎，所以我往左边移动，咱不用算了，左边移动应该是依然是多少103吧，哎，然后103往上呢，依然是多少，依然是68对不对，那都是负值嘛。来，所以这里边。B position往左边是负的103PX，这个呢应该是负的68PX，好了，现在我们再来看。刷新诶，我的下一张图是不是就有了网上举报APP下载对吧，那还剩什么，还剩我们的最后一张，也就是我们的DIV6对吧，Div。井号。Fo。好了。那这回再来井号波波。来，咱们再看BOX6又是谁？BOX6是什么？扫黄打飞对吧？那我们来看。

还是在这里边找上打飞是不是就他最后了，他最后尾是不是就直接往上移动，这些是不是就显示它了，那也就是说在这块该往上多少往上。一个是34，就三个34的大小呗，对不对，那也就是负的呗，是不是这样的，那也就是BC，再个position这个水平位置依然是零撇S垂直呢，是34，呃，68加34吧。负的九十一百零二。对吧，三个34是不是102，哎，那这个时候我们再来看。刷新你看扫打飞是不是过来了，对吧，只是怎么样，我们现在写的都是什么竖的，而人家是横的对不对，那未来我们学了什么，当我们学了这个浮动以后，我们直接给他加一个这个属性就完事，你看走你。这不全给我横过来了。看明白了吗？哎，这样的话，咱们是不是就把那个网站底部是不是就做好了，对不对，哎，当然现在咱没学，咱不管它不要啊，你只需要，只需要你能把背景图定位给我，定位明白就可以了啊，定位明白就可以了，然后另外呢，还有我们还会遇到一种背景图什么呢，咱们再来看啊，这里边有没有，嗯。

其实有，但大家你要注意看，比如说我们再给它返回去啊，返回去你看啊，现在这个结构是蓝色的图标，对吧，我鼠标放上去看是不是变成红色的图标了。对不对，那也就证明这里面它肯定是有两个图片进行背景图进行切换的啊，那我就不拿它做演示了啊，我就不再下载图片了，我把这个网址就关了，那咱们知道这个效果，我就拿这个做演示了，也就是说当我鼠标放了去，它肯定是切换另一张图片的，对不对，那咱们来看啊，我这里边还有哪个图片没有用到呢？呃。123456，那就是他没有用到了对不对，那这样我用可诚信网站啊，用诚信网站，也就是说当我鼠标移移动上去，我让什么呢？让它变换诚信网站，看明白了吧，那怎么变化呢？在这里边啊，我直接给div设置，也就所有的div。

哎哟，不行。行。改不了，因为他的这个那什么啊。我随便找一个吧，我就给这个第三个div啊，第三个div是谁啊，咱们来看一下啊，第三个div是不是成，哎呀，第三个就成来就最后尾吧，最会第六个啊，那我就给他来设置了，比如说我当鼠标移动的它以后，让它变换背景图，那就是井号。BOX6冒号一个号对吧，当鼠标移动以后，让它的这个背景图的定位变成什么，变成三的那个定位，三的定位是谁呀？是不是这个东西，那OK ctrl c。拿过来是不是显示这个成新网站对吧，那现在我们来看可不可以啊，在这里边一样刷新，刷新完以后，你看鼠标移动上来，诶成新网站移走移上移走，你看是不是进行切换了。看到了吧，哎，所以有很多图啊，都是这么来做出来的啊，都是用我们背景图来定位出来的啊，这是我们很常用的东西啊，好了，那背景图定位我们练完以后，这个下来啊，一定要多多练习啊，一定要多多练习，这个很常用很常用啊，那我们再来看还有什么呢。

HTL10背景。属性简写属性啊，在简写属性之前，我们背景属性还有一个属性没有讲解啊，那在这里边我们算了，我自己再重写吧，也不用咱们来看啊。这里边是不是还有这么一个属性的，没有没有用的，我又返回到零八了啊，这是干嘛呢？背景图片是否属于内容的滚动。啊，如果弄对吧，那咱们来看啊，比如说当前啊，我们给他一个。给个div吧，来，再来个div啊，这个div咱们看好了，我直接给个style的高度1000。这样的话，我的页面中是不是就会出现滚动条了来。刷新看好了啊，页面是不是出现滚动条了，目前背景图片是不是跟随着我的滚动，而是滚动的，那么我可以在这里边直接再进行设置，设什么呢？把它。

这个就放在这儿了啊B家用back。At ment啊，然后为什么呢，为这个。F fixxed，这个啊，没fix了，这个时候咱们来看，同样我刷新，刷新完以后，现在你来看啊，我来滚动滚动滚动看好了再滚动图片是不是始终定位到这里。看到了吗？哎，图片始终是不是都在都在这个位置，对吧，只是什么呀，只是我的元素走了，我们看不到了，对不对，那这样我们就不用这个元素来占位了，那就没有必要了，对吧，我们直接给这个叫什么给这个万啊。这个万高度我们是不是给了500啊，变的了给了1000啊，直接给了1000来刷新，是不是有滚动条了，现在咱们来看，诶诶是不是这个图片始终都是定位到这里的，对不对，当然我可以给他换个位置，比如说这个时候我要给他做居中啊，你看我就不用它了。

BGRD加个杠，Process等于一个三角形的居中对吧？来刷新，但是它的居中你看没有了，居到哪去了，它的居中居中到。诶。刷新图片居中呢。C center center。ENT这一居中给居中没了。因为它在在这个位置了啊，它在这个位置了，我也这样，我把它这个宽度啊，也给它加大900。走你你看这个是不是看到了，哎来这个时候你看它当前居中，这回就不是相当于这个元素居中了吧，相当于谁了，是不是相当于我浏览器的窗口来居中了，你看我再拉拉动拉动，它是不是始终在我浏览器窗口上了，对不对，哎，这就是咱们这个属性啊，哪去了这呢。对不对，哎，那一样，我可以设置它默认值，默认叫scholar scholar就是跟随着滚动来刷新，你看这是它元素的居中了，对不对，然后滚动而去滚动了看到有，哎，如果我给他帮他嘛，Fix fix就相当于绑定到页面一样，绑定到页面就跟随着谁跟随浏览器了，所以你在滚动的时候，它始终都定位到你的窗口正中间啊，这就是咱们这个背景图的。

这个。滚动属性啊，背景图的滚动属性，它会设置你是否随着页面的这个滚动而去滚动，那么取值有两个，一个叫什么，一个叫做这个C。背景图片随内容。一起滚动对吧，这是默认值啊，还有一个FIXX1啊，这是什么绑定到页面的啊，绑定到页面了，那么图片不随，页面不随。页面的滚动而。滚动对不对，哎，好了，这就是咱们背景图属性，那么背景图属性写起来比较麻烦对不对，而且他需要的这些东西是不是很长啊，这些单词，那他有没有检验属性呢？也有啊，戴个口呢，就是它的简写属性，而且对于背景图推荐使用简写属性，为什么呢？因为它很方便，很灵活，需要哪个写哪个啊来咱们来看，比如在这里边啊，我就会返回到十页面了，然后我们一样div给他一个井号BOX1。

好了，现在我们来设置这个div style标签，然后给它来一个div，叫做井号BOX1对吧，同样我们先给它一个宽度为500，然后高度也为500，好了，现在我想设置背景颜色，比如说我给了一个背景颜色，为什么呢？为这个P紫色好了，这回看我只给了一个紫色，对不对？那我们来看可不可以。可以吧，哎，然后咱们说了我还要加图片怎么办？那直接再往后写URL呗，当前目录以面积下边呢，以面积下边呢，比如说咱们再来一个有什么。嗯，A吧，是不是A的。a.GPG好了，这个时候你再来看，走，你是不过来了，对吧，让它不重复，那就直接no。

Repeat。等你就不重复了，对吧，只要他定位，直接给他一个center。刷新是不是定位到中居中间中间了，对吧，我还想干嘛呢，我还想让它这个放大，那我直接在这里边，我就不给比例了啊，斜线来分割，给它放一个什么Co v压好这个时我再来看周你是不是放大了。看到了吧，是不是再买整个图片啊，哎，那我一样，我也可以给他换这个什么呀，换另外一个con connect来再来走，你你看是不是在在横向已经布满布铺满了垂直是不是这个自动的。对不对，哎，所以背景图的这个属性很好用啊，而且它没有任何顺序关系，你就随便用就好了，对吧，只是在这个背景图的定位和大小这里边有个区别，这里边你需要如果你需要加定位加这个大小的话，你需要以斜线来做一个分割就可以了啊，那比如说这里边我把它放到前面来，放到前面来来你看。锁机是不是一样啊，对不对，哎，然后包括比如说在这里边，我们给它高度啊，高度给他变化一下1000。

刷新好了，现在是不是出现滚动条了，现在图片是不是属于滚动，而是滚动的对吧，直接我在这个里再加一个f fixx e fix的来。再来刷新。装修完以后，现在你来看走你。周，你看后面的内容确实滚动了，图片是不是始终固定到这儿了，对吧，而且我把图片给它放大了，所以他看不出来了，对不对，哎，那这里边一样，比如这里边我们给他900，那我们还至少还能看到整张图片在这呢，对不对？来滚动条在滚动的时候，你看他是不是始终在这。看到了吧，哎，这就是咱们背景图片的简写属性，非常好用，也推荐大家去使用啊好了，这就咱们背景属性，那OK，这。