76.尚硅谷_HTML&CSS基础_背景二.avi原创

接着来说我们的这个背景，新建一个零七，我们这个背景，背景还有什么东西呢？那这里边啊，我们先来写一下，那我呢，还是找一个找一图片吧，找一个这个这个大脸帽，把这个图片给它粘过来，这么来一个这个3.png啊，明儿我就写简单一点了，然后呢，这里边我们来这儿新建这么一个H天门文件零八，我们还是说我们这个背景。诶，我已经创建好了是吧？嗯，创建好了啊零七这个背景，然后我直接来一个div，点一个我们叫做一个BOX1，然后给它设置一下样式style标签来一什么呢？来一个这个点box box1wise，我让他来什么呢？来一个500个像素hit来一个什么呀，500个像素，然后back，诶咱们来让它干嘛呀，Mar来一个零，来一个凹凸，让它居中啊居中然后呢，我们这设置一个什么呢？设置一个这个背景颜色，我们是一个background的一个color，来个井RBFA，保存CTRL1运行一个中间一个大绿。

是不是大绿方块啊，还不舍得出来是吧，大绿方块，哎，是这么一个效果啊，这么一个效果，然后接下来我们再来看，再来干嘛呢？给它设置一个背景图片，设置一个背景图片，图片以后呢，我们这来一个叫做一个background的一个image，我们那个是诶URLURL我们叫做一个三叫PG，设置一个背景图片，那现在什么效果呀，一堆猫是吧？诶一堆猫这么看着你是吧，可看着你，然后呢，再来啊这儿来设置一个图片，不不重复，诶不重复我们叫什么呀，Background，诶repeat啊background repeat，我们来一个no repeat保存，现在就剩一只猫看着你了，对吧？诶一只猫看你了，那现在我们来看啊，那这个整个外边这个是我们这个div对吧？诶里边那个元素是什么呀？

是不是我们这个图片啊，诶，那我们发现背景图片默认是干嘛的，是不是默认贴着我们元素这个左上角显示啊，哎左上角显示，所以这里边我们来说啊背景图片，背景图片它默认是什么呢？诶是贴着我们这个，诶元素的这个什么呀？诶左上角显示的。诶，左上角显示的，诶那现在我们说了，诶也就是说我我我是不是说非得想让他跟左上角啊，我可能干嘛呀，你你跟右上角我可能更高兴一点是吧？哎，你可能跟左下角我可能更喜欢一点，你可能我更想让你干嘛呀，跟右下角我是不是想让你的图片在不同的位置啊，那这块就需要一个问题，比如说我想干嘛呀，我想让这个图片在我这个div的什么呀中间，我是不是需要让你去居中啊，那这个东西我们怎么去设置啊，诶怎么去设置，那先说我们要设置什么，诶现在啊，我们来画个图，把这个事说一下，其实也比较简单啊，来画个图，我们先来画一个div，咱们假设啊，我这块是这么一个这个div，诶这是我们整个一个div，然后div里边是不是有一个背景图片啊，背景图片默认在哪啊。

是不在我们这个元素的这个左上角啊，诶，那我希望什么呀，我可能希望你在。在右上角对吧，有可能希望你在左下角，我也可能希望你干嘛呀？哎，是不是居中啊，哎居中，那我们想想，那这一块我要调整什么玩意，我需要调整什么，我是不是需要调整我们这个背景图片的一个位置啊，那注意啊，我用不用动元素啊，不用动元素啊，这元素像什么呀？像一个这个相框一样，我们不能动相框，我们动的是什么呀？相框里边那个照片吧，哎，动的是相框里的照片，那我们来说，那怎么去动这个背景图片的位置呢？哎，我们有一个样式来看一眼，我们这个离线手册叫做一什么呢？诶你想一想，那我要动这个图片，那是不是就相当于给图片进行。

定位啊，哎，给图片进行一个定位，那我们来看看有没有背景定位的这么一个属性，诶有一个什么呀，有一个background position诶设置背景图像开始的位置了，那什么叫设置背景图像开始的位置啊，那我们说了背景图像默认是不是从左上角开始了呀？诶我让你从这个位置开始，那它位置就变成变成这来了呀，我让你从这个位置开始默认是不是就变这了呀？哎，所以说他说的是定义我们这个图背景图片开始的一个位置，实际上就是定义我们这个背景图片的一个什么呀位置，诶我们来看怎么定义，直接来打开这个background的一个position，来我们来看一下啊，定位我们这个背景图像，我们来看它的描述默认值是什么呀？哎，零零百分之零百分零相当于什么呀，你可以理解为是什么呀，零零说白了就是我们这个坐标原点啊，坐标原点，然后继承性也是什么呀，也是no啊，也是no，然后我们来看它这个可能的值，可能值你看这个。

叫什么什么top left top center top right top left什么玩意啊，左上角吧，诶top center什么呀？诶上边还干嘛呀，中间也就是说靠上的那个中间吧，诶那还有一个什么呀，Top right是不是右上角啊，诶右上角，那这一看到这这属性是不是就简单了呀？来来说一下，叫做一个background position，通过我们这个BA background一个position，诶可以什么呢？可以调整我们这个背景图片在我们这个什么呀元素中的位置，这个一定要搞清楚，它动的是背景图片，而不是动什么呀，元素啊，动的是背景图片，而不是去动的元素，那好，那我们来说一下它的可选值，可选值干嘛呢？诶我们说诶该属性可以什么呢？可以使用什么呢？诶叫做top right。

哎，Left，哎，Bo bottom，还有什么呢？还有一个center啊，Center这一共是几个值啊，五个值啊，可以使用这几个值中的什么呢？哎，中的两个值来干嘛呢？哎来，哎指定什么呀？哎定一个背景图片的什么呀，位置，比如说我们来说，比如说我来什么呀，来一个这个top，一个life，这叫什么呀？诶，是不是又靠上右靠左呀，这叫什么呀，这叫左上啊，左上一定要注意啊，我们这块什么呀，至少两个值也不是也不是，至少就是你只能指两个值啊，就是两个值啊左上，那那我们来什么呢？我要来一个这个Bo DOM bottom，一个right叫什么呀？是不是右下呀？诶，右下我们来看看行不行啊，我们来一个background，一个position position，我们来什么呢？来一个top left，诶这叫什么呀，左上或者left top也行啊，我们来一看，一刷新走你诶是不是没变化呀？哎，为啥呀，本来就在左上的是吧？哎，本来就在左上呢，来我们再看一个，来一个包，一个life，是不是左下呀，应该跑哪去了？是应该跑这来了，哎，来，我一刷新走，你是不是就下来了，哎，下来了，我再来一个，来什么呢？来一个bottom center，哎，来，再看效果一刷新，是不是靠下边居中来了，哎，居中了，我再来什么呢？

还一个这个center center是不是两个center啊，两个center跑哪去了，是不是居中了呀？哎，居中了啊，所以注意我们使用这个位置非常简单直接什么呀，使用这五个方位词中的什么呀，两个来组合出一个位置吧，组合出一个位置，但是注意啊，你用这个值的时候，你能不能来一个left，来一个right呀，你自己都乱了吧，到底是靠左还是靠右啊，你能不能来1TOP来一包他们呀。

不行吧，哎，一定要注意什么呀，一定是水平方向一个值，还有什么呀，垂直方向一个值啊，一定是水平方向垂直方向一个值啊，哎至少你你必须得干嘛样必得写两个值，刚同学说了，老师我就想写一个值行不行，一个值行不行？诶来我给你刷新走，你你发现什么了，一个值是不是也行啊，哎，一个值也行啊，那么说如果什么呢？一个相当于什么呀？哎，所以这里边注意如果什么呢？如果只给出一个值，哎，则我们这个第二个值默认是什么呀？哎，Center，所以你就写1LEFT和你写一个left center是什么呀？哎，是一样的啊，你如果只写1CENTER，我一保存。一刷新是不是居中啊，哎，你只写一个center，就跟你写什么呀，写一个写两个center是什么呀，是一样的，实际上这东西比较简单，比较好记，实际上它的位置有几个呀，没好多，就九个啊，就九个，那实际上就是一什么呀，就是一九宫格啊，你这一画一个九宫格。

诶，正好把它搁中间是吧？诶，这是一个什么呀？Top left top center top right，哎，这叫什么呀？Right center right bottom，这是一个bottom center，这是一个bottom right，这是一个，哎，Left center，这是一个什么呀？Center center啊，Center center实际上就九个位置啊，就九个位置，那所以你也会看到有问题了，发现什么了，这个位置是不是太少了呀，我就想把这小猫干嘛呢放这儿，诶我就喜欢这个位置是吧？放这我觉得特别好看，哎，那你就用这个top center是不是就有局限了呀？哎，就有局限了啊，所以注意诶使用这个方式呢，比较简单，你要设置一些固定的位置的时候是可以的，但是当你想干嘛呀，你想更灵活一些的时候，用它就不行了啊，它就不行了，来我们再看还有什么方式，诶我们直接看这个，它质疑什么呢？叫做X。

Ose叫什么呀？哎，Position，诶position叫什么？偏移量是吧？诶X轴的一个偏移量，Y轴的一个什么呀？偏移量你看人写了第一个值是什么呀？水平位置，第二个值是什么呀？垂直位置啊，第一个值水平位置，第二个值是一个垂直位置，我们来看说什么意思，也可以什么呢？也可以直接指定什么呀，两个哎偏移量，两个偏移量，我们来说第一个值什么呢？第一个值是什么呢？是我们这个水平偏移量，第二个呢？第二个是我们这个，诶垂直偏移量什么意思，那现在假设我想干嘛呢？我现在这个图片是不是跟中间跟默认是跟左边啊，我想干嘛呢？我希望它往右移多少呢？往右移100个像素，那我是不是就水平方向偏移100个呀？那我怎么写呢？直接来一个第一个值就来什么呀，100个像素表。

什么呀？水平方向向左移动100个，然后我再来什么呢？0PS表示什么意思？哎，垂直方向不动啊，垂直方向不动，水平方向偏移100个，垂直方向不动那什么效果？我这图片会干嘛？是不是应该向右移动100个呀？哎，移动100个，我这一刷新走，你是不是就跑这来了？哎，就跑这来了啊所以注意这两个值什么意思？水平方向的值一个是什么呀？垂直方向的值诶100开始图跟哪啊，开始图是不是跟这儿啊？哎，我水平方向偏移100就往什么呀，往右移动啊100垂直方向不偏移是不是不动啊？那我现在希望什么呢？垂直方向你也往下移动100，那怎么办？哎，第二个值我是不是也来一个100呀？哎，我也来一个100，我这一刷新走，你是不就行了呀，哎，那有这个有什么好处。

是不是非常的灵活呀，想放哪是不是放哪儿啊，诶只要你给我一个坐标，我就干嘛呀，可以给你放到一个任意的一个位置，比如说我来什么呢？来一个200，然后这来一个180，诶当然也不知道跟哪是吧，一刷新诶是往下挪一点呀，诶你想放哪就可以干嘛呀，可以放哪，所以这种方式呢，我们会用的干嘛呀，更多一些啊，我们会用的更多一些，但是这里面我们要说的一个问题，这里边我是不是用的正值啊，那实际上这干嘛呀，也可以指定负值啊，也可以指定负值，我们先说，如果我们先说水平方向啊，如果指定的是一个什么呀。正值则什么呀？则我们这个图片会什么呀？向哪移哎，向右移动，我们这个指定的什么呀，像素啊，零像素，所以我指定了一个200PS那的意思是干嘛呀，我这个背景图片向右移动200像素啊，200像素，那我们说什么呢？如果是负值呢？哎，是不是就反方向啊，哎，如果指定的是一个这个负值，则我们这个图片会什么呀？向左移动什么呀？诶指定的这个像素啊，那我这换一个换一多少呢？我这改一个吧，改一个都给删了吧，我这来一个负负10TX，然后来一什么呀，来个零保存，我们看效果，这一刷新走你诶。

尾巴是不是少点啊，哎，咱们再移点移什么呢？移一个这个负50，我这一保存刷心，诶是不是这耳朵也没点啊，诶耳朵没点，那现在什么状况啊，现在我这图片移移移干嘛了，是不是移出去了呀，而移出去这部分我们就干嘛了，哎是不是看不着了，只能看到在我们元素内部的一出就看不见了啊一出看不见了，来我再来一大点来一个什么呢？来一个150，我这一保存一刷新走你六呵，是不是就就没了呀？哎，就啥都看不见了啊，咱们让他再漏个脸个来个100。一刷新走你诶露个眼睛是吧，哎露个眼睛咱们能不能露半张脸啊，81刷新，哎，是不是落半张脸啊，还漏半张脸啊，你那我们说了，这也是我们说负值的情况，然后再说垂直偏移量，垂直偏移量还是我们说如果什么呀？如果指定一个正值则什么呀？则图片会向点移，哎向下移动指定的一个像素，如果指定一什么呢？如流，如果指定的是一个负值，则图片会什么呀？哎，向上移动指定像素，所以看着我这来什么呢？来一个负10PX麻了。

是不是往上走了呀，哎，往上走走你是不是移上去了呀，哎，移上去了再来一个，我再来干嘛呢？来一个负负40保存一刷新走，你是又往上移了呀，哎，所以注意啊，它可以指定一个赋值，也就说这个背景图片，你是不是想怎么移就就怎么移啊，哎，就这么移，而且这里边我们实际开发中干嘛呢？赋值实际上会用的。更多一些啊，赋值实际上会用的更多一些，但是我们来说为什么要用赋值啊，但我们来说为什么要用赋值，好，这个是我们说的一个background，一个position啊position说完了这东西比较简单，然后我们来再说一个，还有一个，还有一个我们想想在哪演示啊，咱们嗯，咱们就在这儿演示吧，啊就在这演示，那这里边呢，我们这里边现在给我们的这个是一个box，一设置一个背景，这又改套路了，干嘛呢？我给我们这个body设置，Body设置一个背景干嘛呢？也设置。

这个东西，诶，那现在我给谁设置，给body是不是设置一个背景图片啊，我们来看什么效果，一刷新走你诶是不是满屏都是猫啊，哎，满屏都是猫啊，然后呢，我们也是干嘛呀，不让它重复拜色狗让的一个no repeat保存，咱们来看一刷新，诶是不是左上角只剩一只了，哎只剩一只了，那我们现在来看这图片有什么特点啊，来一个这来一个body，给他来一个style，设置一个这个hat来一个什么呢？5000个像素保存，还是这个问题，包底一大是不是滚条出来了，诶来看效果。

哎，你看我这背景图片是不是会会随着我们这个页面滚动啊，滚动完了这个猫是不是就没了呀？诶猫就没了，我们还有一个属性叫什么呢？叫做一个background touchment叫什么呢？设置背景图像是否固定，或者随着页面的其余部分滚动啊，设置背景图像是否固定，或者随着页面的其余部分滚动，那我们来说一下什么意思，直接写一下啊，叫做一个background，一个这个attachment。Attachment来来说一下。用来呃，设置我们这个背景图片是否随什么呀，我们这个页面一起诶一起滚动啊background呢，它这用来设置背景图片是否和图片和我们这个页面一起滚动，我们来说一下它的可选可选值，来看一眼它的可选值，来点开我们这个attachment往下走找一看，有两个值，一叫什么呀，一个叫此刻，诶此刻叫什么呀？默认值，也就是说背景图像会随着页面的其余部分干嘛呀滚动而滚动，还有一个叫什么呀，叫做fixed，诶fix像什么呀？不是像我们这个固定定位啊，哎，它这个什么效果啊，我们来写一下，先来把我们这个死磕写上，死磕它是什么呀？光认值写不写是不是都一样啊？哎，写不都一样啊，所以这里边我们来说这个默认值叫做一什么呀，此刻叫什么呢？默认值背景图片干嘛呀，诶随着什么。

哎，窗口滚动，哎说白了，窗口一滚动，背景图片是不是就就没了呀？哎就没了啊，那我们想想fix什么效果呀，我们说固定定位是不是就定那了，哎，Fix叫什么呀？哎叫做背景图片会什么呀？哎会固定在什么呀，某一位置。

诶干嘛呢，不随什么呀，我们这个页面滚动啊，不随我们这个页面滚动来，那我们这块S块，我这来什么呢？改一个改什么呀，改一个叫做一个fix保存来看效果易刷新没有变化对吧？哎没有变化来往下一捆。它是不是不动啊，哎，背景图片就不动了啊，这个是我们说的这么一个效果啊，背景图片不随我们这个页面滚动，有点像什么呀，是不是像我们那个固定定位啊，哎，固定定位啊，固定定位，所以这里边你要注意了啊，我们叫做一个fix，可以设置我们这个背景图片不随页面滚动，那这个我们可以用来干嘛呀，这效果你们应该见过，广又广告是吧？广告是没少看是吧？零八我们来说一下啊，我们接着来写页面啊背景来我们给他一个body style来一个这个head。

Pad来一个六呃5000个像素，哎，别老看广告是吧，看看疗效是吧，来现在我们这个滚动条又出来了，来咱们这回啊，给它设置一个比较大的一个背景style标签，我们来什么呢？来一个这个body body呢，我们来一个这个background的一个image，设置一个背景图片，来一谁呢？来一个我们这个大一点的，然后给他设置一什么呢？Background，一个repeat叫一什么呢？叫做一个哎，No repeat，不让平铺，诶然后再来什么呢？来一个这个no no repeat是吧？来再来一个background，我们叫做一个background，一个position，来什么呀，Center保存，现在一刷新给我这个。对。没写错吧，哦对，我这包是不是整大了呀？哎，整大了他给我跑跑跑最中间去了吧，哎，我还还还找的是吧，还找呢，那注意了，看着我改一个改什么呢？改一个background一个，这个叫做attachment，我来什么呢？Fixed啊fixed保存再来刷新走你诶发现什么了？是不是上来了，我还没滚的怎直不动了是吧？上来了啊，我要说的是上来了你没发现什么，我不设置fix的时候，它是跟里边啊，当我设置fix时，它干嘛了，上来了，这是为什么，这是为什么background position是不是设我们这个定位啊，当你设置了这没设置这个属性它没了，当你设置了发现它就出来了，那就意味着什么呀，当我设置完这个属性，它的定位元素是不是就就变了呀？哎，就变了啊，所以注意当背景图片干嘛呢，背景图片的这个attachment。

哎，Background，呃，他面的设置为什么呢？设置为这个fix是，诶那什么特点特点呢，我们的这个背景图片的定位干嘛呢？诶永远相对于我们什么呀，浏览器的一个窗口，所以你这写了一个fix，我这在三点，三点相当于谁呀，相对于浏览器的一个窗口了，所以你会发现当我设置fix是不是就回来了呀，所以注意啊，这个固定定位的这个图片，诶背景图片它永远是干嘛的，相对于我们这个浏览器窗口进行什么呀定位的啊，跟我们这个fix是一样的，所以是不是就回来了，诶那这还有什么问题啊，我们来看啊，我这个往下滚滚滚。

就不动了，哎背景图片就不动了，这想起来什么效果了吗？哎，你看的一些什么呀，博客哎，比如说咱们还得请鲁迅出来，鲁迅鲁迅中文CTRLCCTRLV，这是不是有字啊，有字，然后我这回到页面一刷新，诶你看字动，但是背景干嘛呀？哎背景不动，当然咱们这个配色有点有点难看是吧，咱们这样多写几个啊多写几个，诶复制复制复制复制复制复制复制保存，这回大家一刷新走你诶这想起来了吧，诶背景是固定的，但是这个文字它是干嘛呀？哎，会滚动，但是咱们这个背景好像显得有点不太好是吧？诶好有点有点看不清楚，可以修改一下文字颜色，但是主要是让你看这么一个效果啊，文字在动，但是背景是干嘛呀，是不动的啊是不动的，这么一个效果好，这个是我们说的一个background，一个attachment，但是注意啊，这个东西有一个问题啊，有一个问题。

这个东西什么呢？我们说不随什么呢？诶窗口滚动的这个图片，诶我们都是什么呢？一般都是设置给我们的什么呀，设置给body啊，而不设置给什么呢？其他元素，诶为什么不设置给其他元素，难道说给其他元素设置都不好使吗？我们来看看啊，我们来看看现在我把这个background position啊，我给住了，我就给谁设置呢，我就给我们这个BOX1去设置，设置一个什么呢？设置一个叫做一个叫做一个background一个呃，他这么的，我们来什么呀，Fix保存，我们来看效果一运行诶。

这猫我发现什么了，是不是没了呀，注意啊，这是body那猫啊，不是我们那个猫，这里边这猫是不是没了呀，为啥没了呀，它没说为啥没了呀，那怎么说了，他默认是不是去左上角显示啊，我这我这有没有设置position啊，没有设置position他一走干嘛了，是不是跑可能跑这边来诶跑这边，所以他为了让它出来，咱们让什么呢？让我这个宽度啊大一点，把宽度给它去了，但这俩这俩小猫是俩小猫一样的，是不是看不出来了呀，这俩小猫一样，咱们找一个换一只猫。图片再找一个穿云西服的，来一个MG，来一个这个改个名，我们叫一个四，这改一个这个四点PN点保存一刷新走，你这个看见了吧，哎跟这儿呢啊它跟这呢，哎，那现在我们来说换过来以后你要注意了，虽然我们你看它是干嘛了，它少一个耳朵，耳朵放上去了，嗯，它定位是不是现在又相当于我相对于我们这个浏览器窗口已经定位了呀，诶相对于我们浏览器窗口定位了，所以它的00点在哪呢？在这呢，所以在我们这个div里是不是只能显示一部分呀，哎，一部分你要想要显示前了，你还得再写一个星号，诶MARIN0，然后来一个PA掉零不显示强亮，诶来我们这一刷新走，你是不是也行啊，诶也行，但是注意这有一个问题，有一个特别特别关键的问题，咱们来看啊，我这一滚动，诶，这猫是不是。

确实没动啊，哎，确实没动，但是注意了，猫没动，你注意div动没动，Div动了吧，那你想想，猫虽然不随窗口滚动，但是div是随时窗窗口滚动的吧，而你这个猫是在哪呢？是不是在div里边呢？那你就想想，如果div都没了，那猫还有没有了？哎，当然这也挺好玩的啊，有点这种擦地板的这种效果啊来。

诶，咱们这后边还藏一只是吧，这是这就是无意的了是吧？这就是无意的了啊，还换了一只猫挺好玩的是吧，大家注意，一般我们不会给它设置，为什么呀，因为它一它虽然还在，但但是我们说了div是不是都没了呀，哎，虽然它不随时滚动，但是div随着随时滚动啊，随时滚动好，所以这块一定要注意啊，感觉好像应该这么设置的是是吧，所以一定要注意啊，这个东西我们一般是不会给其他元素，一般都是给什么呀，给body啊给body设置的好，那这就是我们说背景相关的这些样式，我们都给他说完了，我们先呢停一下。