74.尚硅谷_HTML&CSS基础_背景一.avi原创

这个我们简单的给他说完了啊，然后定位我们就在我们后期的这个这个项目里边去去去去练习了，那接下来我们再说一个比较有意思的一个叫做一个背景啊，背景相关的一些样式，那背景其实我们已经会整了，比如说我们会整什么了，是不是背景，背景颜色呀，啊背景颜色比如说我这个box一来写一个style标签，直接来一个点一个BOX1，然后外来这个500个像素，Hat也来一个这个500个像素，那我们要设置背景颜色怎么设置啊，嗯，设置我们这个背景颜色，我们叫做一个background的color啊background color背景颜色，比如说来一个井号BFA，我保存，然后一型，诶是不是这么一个绿色一个方块就出来了呀，诶那这样让他让他干嘛，让它居中一下，我们测试的时候好看一点，诶MARIN0，然后来一个auto凸你刷心，这是我们一个背景颜色呀，来背景颜色，那么说了，我们除了背景颜色，那还。

没有什么其他东西需要，诶，比如说我们来看这吧，我们这有一个这个图片，比如说我拿到这个这个图片吧，这2.dbd，哎，那这个是一个什么呀，是一个图片，嗯，我希望什么呢？我希望使用这个图片来作为我一个元素的背景，这行不行啊，哎，就跟我们拿图片做桌面背景是不是一样啊？诶那在我们这个网页里怎么拿图片做这个背景的，诶我们来看看这个样式，诶直接找到啊，我们往上一走，有一个什么呀，一点这个背景，所有背景相关的是不是都列出来了呀？Background color，我们这个背景颜色，然后这有什么呀，Background，一个image叫什么呀？设置元素的背景图像，Image是不是就图图片图像的意思呀？哎，那叫做background image，所以我们要设置背景图片，用什么呀，用这个呀，Image来设置就行了啊，那问题就来了，那这东西它怎么设置啊，我们来说一下啊，Background一个image，使用我们这个background image来干嘛呢？来设置我们这个什么呀。

诶背景图片啊，来设准备背景图片，那我就来一个吧，Background一个image background一个image，诶我这一写这这这这后边怎么写呀，我要设置图片，我是要想设置我这个。2.gbd啊，那干脆我先给它粘过来，CTRLCCTRLV，我给它粘过来，粘到这来，那我怎么写呀，我写一个2.gpd给没看见啊行吗行吗？他肯定不行是吧？哎，肯定不行，那这块我们看他是怎么写的啊，直接来看他这个文档啊哎，他出提示就没意思了是吧？诶它的文章怎么写的，诶这一个background，一个image后边跟一什么呀，诶跟URL，所以我们需要干嘛呀，需要把这个图片地址是不是写到一个URL里边啊，哎，Urr里边，所以这边我们怎么写的来一个URL，哎，然后一个什么呀，括号，括号里边是不是我们图片地址啊，那图片搁哪呢？诶是不是在我们这个MG文件夹下的这个2.dvd啊，诶那我们说这块我用相对路径的话，我怎么写啊，诶，那我们来看IG是不是跟我们这个当前这个背景是不是在同一个文件夹上呀，哎，所以直接写写什么呀，诶MG，诶斜杠一个什么呀，2.gpd是不是就行了呀，哎，一保存咱们。

再来看这一刷新走你，诶那现什么呢？只显示了我这个半颗心是吧？哎，只显示半颗心，为什么呀？哎，那我们来看现在我们的元素大小是500乘以500，而我们这个图片大小是多大，是不是1024乘以74啊哎，所以你们会发现什么效果，默认是不是只显示了这么大一块啊诶其他这部分是不是都都看不见啊？诶所以注意我们要看到第一种情况叫什么呀？诶如果什么呢？诶如果我们这什么呀？诶背景图片它干嘛呢？大于我们这个元素大于诶如果背景图片大于元素，默认会什么呀？默认会显示我们这个图片什么呀？对左左上角啊，默认会显示我们这个图片左上角，那什么意思呀，我们图片是这么大个，而我元素干嘛呀，只有这么大个，它是从哪啊，从左上角开始干嘛呀显示的，所以你看到纸是什么呀，左上角这部分，那如果你再加。

点是不是左上角就扩大一点啊，再大点是不是再扩大一点啊，哎，那俩再扩大一点啊，所以这里边注意默认是显示我们这个左上角，诶那我们说我要什么要它显示，让它显示全部怎么办？诶我是不是把我们这个图片大小和我们的元素设成一边大呀，哎不是把我们元素设成和我们这个图片一边大，对吧？改图片比较麻烦啊，那所以这里边干嘛呢？它的尺寸是一个1024乘以G24，那我干脆干嘛呀，这Y1024像素，诶这个hi来什么呀？诶724像素保存咱们再看一刷新。这个是不是就完整了呀，哎，这就完整了啊，所以如果什么呀，如果我们这个背景图片和什么呀元素哎一样大哎一样一样大则什么呀，哎则会将我们这个背景图片干嘛呀，哎是不是充满我们的元素啊，哎叫全部显示吧，哎将我们这个背景图片全部显示啊，全部显示，所以这是我们说这两种情况啊，这两种情况然后呢，我们再说一下它是怎么写的啊，背景图片我们是写写一什么呀，写一个URLURL里边后边是跟着我们什么呀，图片的这个相对路径吧，哎相对路径啊所以这里边我们来说一下它这个语法啊，这块再强调一遍，它这个语法语法我们是一个background的一个image，后边跟着一个URLURL里边写的是我们这个图片的一个相对，呃路径啊相对路径，那这既然是相对路径，我这块就有一个小问题了，那现在假设什么呀？诶我不在这写了，我给注了保存，我这一刷新图片是不是没了呀？诶图片没了啊，然后干嘛呢，我这来。

右键新建一个这个CSS文件，后来什么呢？带这这是一个什么呀？这是一个外部的样式表吧，诶那我们怎么引入样式表一个哎，Link，然后是不是一个CS style.set引入完了以后，我在这个里边来设置box一来一个什么呢？来一个background，一个image，诶那我问你了，我把这个原封不动复制过来。

行不行行不行，对不对，来来试试是吧，一刷新走你是没有啊，哎，为什么没有啊，诶路径不对了，所以注意我相对路径我写在哪就什么呀，就相对于谁去计算，那现在我写到这个背景点表里边，是不是相对这个页面去找啊，那这个页面就在我这个网站的什么呀，根目录下，所以我是不是直接就找你位置是能找的呀，能找的但是注意我这个style.css跟哪了，是不是在CSS文件夹下啊，所以我这么写一个IG，一个2.dpt表示什么呀，上CSS里边去找MG文件夹，它里边有吗没有，这是不是在CSS外边的呀？诶所以你这么写是不是找不着啊，所以注意啊，我们要说什么呀，相对路径写在哪写在哪干嘛呀？哎，就相对于哪文你家。

哎，哪个文件夹。哎，并不是说什么呀，并不是说我这个路径我是不是在这儿引用的呀，并不是相对于它而相当于什么呀，相对于style.css所以这路径我得怎么改，诶是不是点点斜盖啊，诶点点斜盖啊，一保存咱们一刷新走你这时才行啊，诶所以注意啊，相对路径我写在哪，就相对于谁，写到外部的CS文件里，就相对于什么呀，外部的一个CS文件啊，这个就不多说了，好，那这里边我把这个注了啊，还是咱们在里边演示，主要说一下这个路径的问题，那现在我们这看到了，我们说了，当我们那个什么呀，背景图片大于元素的时候，我们发现什么效果，诶这个元素会干嘛呀？诶会只显示左上角是吧，当背景图片和元素一样大的时候，会完整显示我这个背景背景图片，诶那这里边我们来看，那还有一种情况什么呢？嗯，我先把背景元色去了啊，别给他们捣乱，我把这个干嘛呢？有一种情况，我们这个图片比我这个元素干嘛呀，小小，那什么情况来咱们找一个这个。

这个小包直接把图片粘过来啊，CTRLV改一个名，我们叫一个。1.pnd啊1.pnd，然后我们来看看效果保存，然后呢，我这就不写二点P2点DPD了，改一个改一谁呀，1.pnd，那现在我们来看这图片大小，我们就能看见直接来个1.pd，这是一个什么呀？128乘以什么呀，128，而我们这个div大小是一个什么呀？1024乘以724，这个div是不是远远大于我们这个元素大小，这个图片大小啊诶我们来看这有什么效果啊，一保存我们来一刷新走你。诶发现什么了，哎，是不是好多猫啊，哎好多猫，但是其实我这图片只是什么呀，只是只是一个吧，诶只一个，但是它给我显示什么呀，一堆啊还是一个要饭的猫是吧？诶要饭的猫诶一堆猫，那我们说这种情况叫什么？如果我们这个背景图片干嘛呀，小于我们这个元素，诶小于我们这个元素大小则什么呢？诶则会默认将我们这个背景图片干嘛呀，平铺啊平铺以什么呀，以充满哎元素啊以充满元素什么叫平铺啊，是不是就重复啊哎一个摆不够干嘛呀，我再摆一个，摆不够再摆一个，摆不够再摆一个，摆不够再摆一个，是不是一直摆呀，直到把你那东西干嘛呀给你摆摆了，这是是吧？哎，我单位大小不行，我数量上是不是占优势啊？诶数量占优势啊，所以注意，如果我们这个图片比我们这个背景这个元素小的话，我们会干嘛呀，所会采用一种评估的方式来使我们这个。

图片充满我们这个元素啊，充满我们这个元素，好，那这块屏包我们这看完了，然后再看一个问题啊，那我们来说，那我能不能将背景图片和背景颜色同时设置啊，同时设置啊，诶我们来看效果一刷新走你是不是行啊诶你会发现背景颜色在哪呢？是不是在图片的后边啊诶为什么呀，那我我把背景颜色如果写下边，它会不会跑前面的呀，会不会跑前面的呀，你刷新是不是还在后边啊哎，所以注意背景颜色一定是在我们这个背景图片什么呀后面啊我们来说一下可以同时干嘛呢？为一个元素指定背景颜色和这个什么呀，背景图片那这样什么呢？这样背景颜色将会什么呀，将会作为我们这个什么呀图片，诶，背景图片的一个这个底色，呃，咱们就别背景是吧，再说背景该乱了是吧，诶这样背景一样，背景颜色啊，背景颜色，背景颜色将会作为我们。

背景图片的一个底色，所以我这设置一个绿色以后干嘛呀，我这背景底色就不是白色变成什么呀，变成这个绿色了，变变成这个绿色了，所以这里边要注意，一般情况下我们都会干嘛呀？诶一般情况下诶设置完诶背景图片诶设置我们这个诶背景图片是都会什么呢？都会同时指定一个什么呀，诶背景颜色啊，都会同时指定一个背景颜色，为什么呀，那我们来说背景图片是一个这个。

外部图片是吧？诶外部图片它加载的时候就需要花费一定的时，什么什么呀时间，那有的时候干嘛呀，它这图片一下子干嘛呢，它没出来呢啊没出来呢，那所以干嘛呀，你给他指定个背景颜色，即使图片没出来呢，你是不是用户可以先看见什么呀，背景颜色显得不是那么空是吧？哎，不是那么空啊，所以这样注意背景图片和颜色，我们一般都是什么呀，同时去指定的啊，同时去指定好，那这块背景图片我们这就看完了，但是这个玩意儿吧，感觉有的时候不太好，你像我就看这个猫就有点有点晕是吧？要密集恐惧症是吧？哎，一堆一堆小猫看着挺难受的，那我不希望你重复我希望什么呀，我就想要这一只猫是吧？哎，只生一个好是吧，你只要这一只猫，其他猫我全都干嘛呀，全都不要，也就说我让不让你平铺，哎，不让你平铺，那我怎么来不让它平铺呢？哎，那这设计什么图片大小是吗？大小肯定不行是吧，你大小变成一个大猫是吧，那还不。

不剩一堆呢是吧，还不剩一堆啊来，那我们来看啊，回推还有一个属性叫什么呢？叫做background repeat，诶，Repeat叫什么呀？设置是否及如何重复背景图像，那你来看我这给我摆一堆毛，是不是在重复我这个背景图像啊哎，那我们来看怎么用repeat去设置这个啊，来点开我们这个repeat repeat，我们来看它是什么呀？诶，属性设置是否如何重复背景图像，然后默认值叫什么呀？Repeat，呃，继承性是一个什么样？No，所以注意所有背景相关的样式都是不会继承的啊，不会继承的好，那接着我们来看它的怎么设置啊，我们来先说一下吧，叫做一个掰一个repeat background，一个repeat repeat什么意思呀？对，就是重复的意思啊，就是重复的意思，Background repeat用于干嘛呢？用于设置我们这个背景图片的这个什么呀，重复方式啊，重复方式，我们来说它这几个可选值。

核验值，刚才我们看到有一个什么呀，有一个叫做repeat，诶repeat它是什么呀？它是叫什么呀，默认默认值背景图片会什么呀？会双方向重复，诶就是什么呀，我们所谓的那个评估啊，什么叫双方向重复，双方向重复你看什么呀？是不是水平方向重复，垂直方向也重复呀，哎叫做一个双方向重复啊，双向重复，诶那我们来看我这写一个repeat，我们说这有没有变化呀？诶我这一刷新是不是没有任何变化呀？哎，没有任何变化啊，Repeat叫做一个双方向重复，然后还有什么呢？还有一个叫做一个no repeat no repeat什么意思呀？诶不重复，我这一刷新走你干嘛了？诶整个这个世界一下子就就干净了是吧？诶只剩下这么一只猫了，那什么叫漏repeat的呀？哎，就是不重复啊，不重复no repeat叫什么呀？哎，不重复哎背景图片不会重。

不有有多大就什么呀，哎，就显示多大啊，有多大就显着大啊，这是我们说这个no repeat啊，那除了no这屁我们还希望什么呀？有的时候我希望这小猫啊，咱们别满屏都是了，我希望小猫干嘛呀，站一排哎，站一排对吧？横向站队你怎么办呀？我是不是希望它横着重复竖着不重复呀？哎，你知道一个什么呀？有一个值叫做一个P的一个X啊P的X叫什么呢？哎，叫做背景图片，我们这个X轴重复背景图片沿我们这个X轴或者叫什么呀？叫水平方向重复啊水平方向重复保存再一刷新走，你是不是一排冒了呀？哎，一排冒了，那我希望什么呀？是一溜啊，诶竖着那怎么办呀？有P的S你能猜到是不是还得有一个P的Y啊？哎，沿着沿着我们这个Y轴，诶，垂直方向重复一刷新。

是不是一溜啊，哎，一溜啊，所以这里边我们这么量这么几个可选值，Repap的一个这个什么呀，哎，Repeat的一个Y叫做背景，背景图片沿我们这个诶垂直方向什么呀，重复啊，沿我们这个垂直方向重复，好那这是我们说的背景的这么几个三个三个样式，我们先说到这儿啊，第一个叫做background color，我们很熟悉了，设置我们这个背景颜色，第二一个是设置我们这个背景图片，Background上的一个image后边跟着一个这个URL，是我们这个图片的一个地址，然后你要注意他们的那么几种情况，诶比图比元素大，诶核元素一边大，还有比元素小的情况，它是怎么去处理的啊，怎么去处理的，然后还有一个是我们这个background repeat设置如何去重复我们这个图片，Repeat就是什么呀？双方向去重复no repeat的就是什么呀？不重复repeat X就是水平方向啊，X有重复，而repeat y呢是什么呀？垂直方向我们这个Y轴重复啊Y轴重复好这。

这是我们背景的一部分，这个样式我们来停一下。