尚硅谷前端基础 (88)

好，说完这个，我们正常的来进入到我们这个呃，背景相关的内容啊，当然这个Photoshop啊，你只需现在只需要把它装好就行了啊，然后我们随着用就再去说，嗯，这里边我们来新建一个文件，我们叫做一个0909，我们要说什么呢？啊，我们要先说我们这个背景，嗯，第二一个N，那背景的话，其实这个东西也很简单了，我们其实哎，我们先写个东西吧。这写一个div，点一个BOX1，给它设置一个样式啊，这我们直接来一个style标签啊，Style标签我们点BOX1呢，我们来个500 hat呢也来个500，然后background color background color，我们来一个这个井号一个B，这一保存直接我们来运行一下。那这里其实我们背景相关的像background color是不是就是一个背景颜色呀？哎，背景颜色啊，所以这里边我们就要说一下，第一个我们说的一个背景相关的就叫做一个background color，它用来什么呢？诶用来设置我们这个背景颜色，这个东西没什么好说的，因为我们一直在在用它，就是你写完了以后给它设置一个颜色是不是就好了，哎，设置个颜色好了，但是我们实际上在开发过程当中呢，我们背景上除了有颜色，还有一个比较常见的是什么东西啊，哎，也就是我们的一个背景，背景图片，背景图片，所以。

比如说啊，我这里边有没有图片，我有n.DBD，我们换一个图片吧，诶。比如说在我这有这么几个图片，诶，有个小猫的图片对吧，比如说我就复制一个CTRLC。诶，这这这CTRLC还不行，把这茬给忘了，我们应该是把这个图片给他干嘛呢，给他拖过去啊，给他拖过去。哎，直接放到这个MG里面啊，我们改一个名啊，改一个名我就要一个1.png，那假如说我现在想干嘛呢？我想把这个图片设置为它的一个背景图片，那要怎么办呢？哎，那在这里边我们就可以直接通过我们的叫做一个background，一个image background，一个这个image，这是干嘛的呢？诶，这个是用来设置我们这个背景图片的啊，设置我们背景图片，背景图片怎么玩？我们直接by in theground image，那既然涉及到背景图片，那你这里是不是要给他一个图片的一个路径啊，哎，你要告诉他你要设置的是哪个图片，所以我们这要写的是一个URLURL就是路径的意思是吧，在这里边我们需要写一个URL，在这个括号里写的是什么呢？写的是你那个图片的路径啊，写的图片路径，那我这个图片在哪呢？在我们这个相对路径点一个这个img下的一个叫什么呢？诶叫做一个这个，诶叫做一个这个1.png啊1.png是这样一个图片，那这个时候你会发现我这设置了。

完了以后这图标是不是设置上了啊，当然这里边啊，一定注意写路径的时候，这儿不能直接写，外边需要套一个URL，当然还有一种写法，我们也可以干嘛呢？我们也可以在这个路径上啊，去套一个这个引号。

就这样的话，就避免你这个路径里包含一些那种特殊字符，导致你这个路径啊出不来img下边的一个1.pg啊1.pg，那这样效果是一样的啊，加不加引号都行啊，加不加引号都行，那现在我们这一块是不是设置的就是一个背景图片，哎，就是一个background image啊background image background color背景颜色，Background image背景图片，那我们这两种东西我能不能同时设置，哎，我能不能同时又设置背景颜色，又设置背景图片呢？哎，我们来看效果啊，我们这一执行，诶你看是不是也可以设置啊，哎，同时可以设置啊，我们可以同时设置背景颜色和背景图片，那如果同时设置其实也很简单，那就是你这个背景颜色会成为什么呢？成为你这个图片的一个背景色，哎，我们可以同时，诶，同时设置我们这个背景图片和我们这个背景颜色啊，那这样什么呢？这样我们背景颜色将会什么呢？诶将会。

成为我们这个图片的一个什么呢？图片的一个背景色啊，这个也很简单啊，这个很简单，那这样的话，我们两个就说完了，一个是background color，还有一个叫做background image，但是这里边你要注意一点，现在我这个背景图片多大，我的背景图片是一个128乘以128的，而我们的这个元素大小是什么呢？是一个500乘以500的，那这个时候我们来看，也就是说我的背景图片小，而我的元素是是大的，那这个时候它是怎么设置的？哎，我们来说一下，我们说了，如果我们的背景图片干嘛呢？诶，它小于我们的这个什么呀，元素啊，小于元素则什么呢？诶，则我们这个背景图片会自动，诶，背景图片它会自动在这个元素中平铺啊，平铺干嘛呢？诶将我们这个元素铺满，那这是我们说的一个。

好的情况下啊，小情况还有什么情况呢？哎，你假如说我这还有图是吧，还有图片，我这个图片可能有一个比较比较，哎，我这还没有这个。没有大图片现在对吧，我现在没有大图片，那我比如说吧，我现在呢，我把这个元素啊换小一点，我把元素换成一百一百，那这个时候我们会发现什么呢？我们会发现现在我的这个背景图片是不是比我的元素大，哎背景元素，背景图片比我们元素大了，所以注意，如果背景的图片干嘛呢？诶大于我们这个元素，那我们说了什么呢？诶将会什么呢？将会有一部分背景无法什么呢？无法完全显示啊，无法完全显示，所以你看这小猫实际上它有一部分就隐藏起来了啊隐藏起来了，那如果说我的背景图片跟我的背景是一样大的，比如说我这就一个128乘一百八的，那这个时候呢，就正常显示了，对吧？如果什么呢？如果背景和哎背景图片和什么呢？和我们这个元素一样大，哎就什么呀，哎则会什么呢则哎会我们直接干嘛呢？哎正常显示这个没什么则。

说的啊，这没什么说的好，那这个就是我们关于背景图片的一些问题啊，我们先给它改大一点，也就是说如果你背景图片小，那它会自动平铺啊，然后呢，把这个元素给你撑满，如果你图片大的话，它会有一部分被隐藏一边大就没什么好说的了，那现在比如说我有这么一个需求，我需要什么呢？诶，我需要的是你这个背景图片啊，虽然小，但是像这种情况呢，我希望我这里边呀，只有一只小猫啊，只显示一只小猫，不要显示这么多只，哎，我一只就够了，那怎么办呢？那怎么办？我们还有一个背景相关的样式，叫做一个background b background叫做一个repeat，诶repeat background，一个repeat，这个是干嘛的？哎，Repeat，这个是设置我们这个背景的一个重复方式。

它用来设置我们这个背景的一个重复方式啊，重复方式，那这个什么叫重复方式，那比如说我们来说一下它的可选值，可选值呢，第一个就是repa repeat，它是一个默认值啊，默认值，默认值什么意思？我们的背景会什么呢？会沿着我们这个元素，哎沿着什么呢？X轴哎，Y轴哎叫什么呢？哎，双方向重复啊，双方向重复进行平复，你就说什么意思啊，我X都重复完了，Y轴呢，我还继续重复，已达到一个目的，就是将我们这个元素给铺满这个目的啊铺满这个目的好，这个是我们说第一个值叫做一个repeat，它是默认值啊，你写不写都一样，看看background一个repeat，我们直接写一个这个repeat的，你看是不是效果是一样的，哎，效果是一样的啊，然后还有一个我们叫repeat X，你看到了X就是什么repeat X。

这叫什么呢？诶，沿着我们这个X轴方向重复，也就说只沿一个方向啊，Y轴就不会重复了啊，然后还有repa，我们叫做一个Y，诶repeat y叫做什么呢？哎，叫做沿着我们这个Y轴的一个方向重复啊，沿着Y轴方向一个重复，所以这个时候如果换成P的Y，那我这小猫就变成竖着的啊，所以你要想横向重复用一个P的X，你想纵向重复用一个P的Y啊，这是三个啊，Background color background。还有一个background repeat，然后还有一个就是什么呢？哎，那比如，哎，当然这值还没说完呢，还有一个东西我们叫做no repeat no repeat什么意思？哎，不重复，哎叫做什么呢？我们这个背景图片呢，哎，不重复，不重复那什么效果呀，不重复那就是我有多大我就显示多大啊我不会去，哎尝试着去把你这页面给撵铺满啊，叫做no repeat，那这个是我们说的这么几个样式是吧，颜色图片，还有repeat repeat说完了以后我们再来看啊，现在我们这个小猫我们的背景图片啊，它默认是干嘛呢？我们背景图片默认是不是在我们这个元素的一个左上角啊，哎，左上角，那我现在我不想它在左上角行不行呢？哎，那这里边我们说的是一个叫做background background position position，这是什么呢？这是用来设。

至我们这个背景图片的一个位置啊，背景图片的一个位置，它的设置方式啊，我们常用的有两种啊设置方式第一种呢，是通过什么呢？通过我们这个top right right bottom，还有center，哎几个什么呢？几个这个表示方位的词。

哎，来设置我们这个背景图片的一个位置，什么意思，那像我们background position，我就可以写一个background position，比如说我写一什么呢？我写一个top left，这就表示的意思是什么呢？是让我们这个图片在我们元素的一个左上角top。Left，那不就是这个位置吗？对吧？因为默认值其实就是top left在左上角，那你说我想让它去中间上边的中间，那你就改成这个top center，那这样就表示什么呀，去到上边的中部了，对吧？你说我想去到右边，那就是top，一个right啊，Top right，那这个时候就去到右上角啊，右上角你说我想去右边中间，那就是center，一个right就跑这了，对吧，你说我想去到中间，那就是一个C呀，Center center就跑到最中间了。所以这个东西一共是五个表示方位的词，在这儿的话，实际上就是一个九宫格，哎，实际上就是一个九宫格，九宫格干嘛呢？这是top left top center top right，这是right center，这是bottom right，这是bottom center，这是bottom right，这是，诶，这个是这个left center，对吧，是这么一个九宫格，这就表示一个center center，所以你通过这几个方位呢，可以通过一个，就是把这个东西摆在这个九宫格里边的一个任意位置，啊，九宫格相当于一个，那这。

这里边注意了，我们这个东西你再去定位的时候，至少需要两个值，比如说你要不然你你你水平方向有一个，你垂直方向呢，还得有一个，对吧，至少要两个值，那你说老师不行，我就写一个值，比如说我就写一个life，哎，如果你只写一个值的话，那默认的话就是第二个值就是center啊，就是center，所以这时候注意我们使用这个词，使用这个方位词时，哎，我们必须要什么呢？必须要同时指定我们这个两个值啊，如果什么呢？如果只写一个，诶则我们这个第二个。

哎，默认就是什么呢？就是这个center啊，所以像这个我只写一个left，那OK，那就是left center，你只写一个center，那就是什么呀，Center center，所以默认情况下应该写两个值，如果你只写一个，那么第二个值默认就是一个center，好，这个是我们说通过这个方位词来设置我们背景图片的位置的，那除了通过方位词的话，我们还可以直接通过什么呢？我们还可以直接通过，哎，通过我们这个偏移量。哎，偏移量来指定我们这个背景图片的一个位置，什么叫偏移量呢？看这了，实际上就是需要两个值，一个是我们水平方向的偏移量，还有一个什么呢？还有一个是我们这个垂直方向的偏移量，哎，垂直方向的偏移量，这个有点像我们这个阴影那个啊，垂直方向水平方向的偏移量，那这时候我们直接写一个，直接写一个background position，比如说我写一个十像素，写10像素，我们来看效果，什么效果，哎十像素表示什么意思？水平方向偏移十个像素是这个距离，垂直方向偏移十个像素是不是这个距离啊？哎，我要写个100像素，那我就直接是一个100 100，那就是水平偏移100，垂直偏移100，懂这意思吧？哎，所以你这个第一个值是这个X轴方向，水平方向，这个值越大，它越往右走啊，这个第二个值呢，是垂直方向，这个值越大，它越往上往往往下走啊，往下走，所以我这如果改成一个300的话，你看的位置是不是就。

更靠下了，哎，更靠下了，那我如果写个负值的话，那就是往反方向走，这跟我们那个东西是是一样的啊，跟我们有点像，我们那个Mar啊，电距，你可以通过它来改变我们元素的一个位置，就是背景图片的一个位置，通过这种形式，你想把这个背景图片放在哪，你就可以放在哪啊，那这个东西叫做一个background position啊，是用来设置这个，设置这个位置的啊，设这个位置，当然这种情况其实我们用的时候一定注意两个值，一个是水平方向，一个是垂直方向的，你像这种情况，其实我们以后会说，实际上我们用正直多还是用负直多呢？诶用负值会偏多一点，为什么？别着急，待会我们来演示这个问题啊，待会我们来演示这个问题，好，我们暂时先说这四个属性，一个是背景颜色，背景图片，诶，背景的重复，还有一个背景的位置，这四个可以说是用的最多的四个啊，林兹德四个，好，我们先停一下。