尚硅谷前端基础 (93)

好，关于背景的话，最后我们还有两个东西要去补充一下啊，补充一下这两个东西呢，就是我们说的一个叫渐变啊，叫渐变，那什么叫渐变呢？所谓渐变也好理解，那渐变的话，那比如说我们之前设置一个背景颜色啊呃，在这里面我们来新建一个文件，新建一个文件，我们叫一个111，我们来说一个这个渐变，什么叫渐变啊，我们之前啊，我先写个页面运行一下。写一个点一个BOX1，然后呢，写个样式啊style标签，Style标签的话，我们直接来一个这个点一个BOX1 box1我们来一个Y是一个200 hat是一个200，我们之前也可以给我们元素指定背景颜色，比如说写一个井号BFC，诶那这样的话，我们这个BOX1就是一个200乘以200的这么一个绿色的盒子，那这种颜色我们叫做一个纯色的，诶你说背景颜色是纯的，诶蓝色，这绿色的就是一个绿色，它是一趟色，它没有混着别的别的颜色，那所谓渐变的就是我们这个背景颜色，它是一个比较复杂的颜色，它是由多种颜色去构成的啊，多种颜色去构成的叫一个渐变，可能我这上边是一个红色，下边一个黄色，它从红色到黄色开始渐变，对吧？诶，好，那我们先不废话，我们先来演示一下啊，演示一下那渐变呢，哎，我们说通过我们这个渐变，哎渐变可以什么呢？诶可以。

也设置一些我们这个，哎复杂的这个背景颜色，哎颜色所以复杂就是什么呀，哎就是可以从诶一个颜色，哎颜色干嘛呢？哎一个颜色像什么呢？像其他颜色进行什么呢？哎进行过渡的效果。过度的一个效果啊，哎，可以什么呢？可以实现啊，从一个颜色像其他元素过渡的一个效果，那这里边这个背景渐变我们要怎么设置，那首先你要先注意一点啊，注意一点这是最重要的啊，一定注意渐变是什么呢？诶，渐变是图片啊，需要通过我们这个一个image来设置啊，需要通过background image来设置，时刻记住了渐变是。

图片它不是颜色，所以我们设置渐变的时候，它的很多特点都是和背景图片是一样的，而和背景颜色相距甚远，虽然它属于一种颜色，但是它的特质和图片。一样啊，和碎片一样，因为它颜色比较多，比较复杂嘛，那你一个颜色没那么复杂，所以它就跟图片一样啊，所以这个时候你要设置渐变的话，我们需要通过这个background image或者简写属性，你用background color也行啊，我们这个渐变的话分两种，我们先说第一种叫做一个lander的一个greenent，啊lander，一个greenent，这个叫什么呢？这个叫做一个线性渐变。

这个叫线性渐变，线性渐变啊，Leer grent啊，那这个什么叫做线性渐变，哎，线性渐变就是我们这个颜色呀，沿着一条直线发生一个改变，哎，沿着一条直线啊发生变啊发生变化，它这变化是一个直线啊，直线我就从左往右变，或者从上往下变，哎或者从哪个方向，总之它都是一条直线的，叫线性对吧，叫线性，那这里边怎么设置啊，我们先说一下，非常简单，比如说我想设置一个红色像黄色界变效果，那我直接写什么呢？写一个red，然后逗号，我再来一个这个yellow啊，来一个yellow，那这个时候你看我们这个背景颜色是不是就非常漂亮了，哎，非常漂亮，那你看开始是一个什么呀？是一个红色，然后这是一个什么呢？黄色，它会由红色像黄色逐渐发生变化，中间是不是就会发生过渡，诶发生过。

度，所以这时候啊，我们这儿来说一下它什么意思，这表什么意思呢？这表示红色，哎在我们这个开头，哎在这个开头，而我们什么呢？而我们这个黄色在什么呢？在结尾，哎在结尾，然后呢，中间是什么呢？哎，中间是我们这个过渡区域啊，过渡的这个区域，也就是说我在中间这块区域是什么呢？就是由黄色向红色进行过渡的，也就说我1.1.1点点往黄色那那去变啊这么一个效果啊，你看这个颜色非常漂亮对吧，非常漂亮，而且你注意它的这个颜色的变化是怎么变的，哎，它就是从上往下去去变的啊，从上往下去变的，这叫做一个渐变，诶所以它就是一个方向，哎，从上往下，哎，那你说老师我现在不想让他从上往下，我想让他从左往右边行不行，哎，从往右边，我可以在前面再加一个，比如说我可以写一什么呢，我可以写一个这个to。

哎，To，哎，Right，哎，To right，那这个时候呢，我们来看这是什么效果，哎，To right表示什么呀？向右，这个时候就变成了一个什么，从左向右边啊，从左向右边，所以这里边注意线性渐变的开头，哎，我们可以指定一个这个渐变的什么呢？渐变的一个方向啊，渐变的一个方向，比如说我们可以写什么呢？Tool left的，哎，Tool right，诶，Tool什么呢？Tool bottom，诶还有什么呢？还有to这个top，哎，To left表示什么意思啊？哎，表示向左边，那这个时候红色就在左，在右边对吧？红色就在右边，哎，从右往左边对吧？To left向左，To right向右，那To Bottom向下，默认其实就是向下的，你写不写都一样啊，To Bottom向下，To top呢，就是向上，正好颠倒了。

啊，你可以通过这几个东西来指定方向啊，指定方向也可以什么呢？也可以，比如说我写一个45第1G，诶45第1G45度啊45度这叫什么呢？诶叫做一个度数啊度数也就是说叉叉叉，哎叫做一个第1G，第1G表示什么呢？表示度数是吧大啊表示我们这个度数，也就是说你可以直接指定它的一个旋转的一个度数，比如说零度零带那就是哎那就是等于是什么呀？等于是往上转对吧，等于它是转了一圈，它是往上转红的，本来是不是，如果你不写的话，它是不是红的是。红的是在上边，诶从红的往这个黄的边，当你写上零度以后，那这个时候是不是正好是颠倒了一个，哎，颠倒了一个，那这个时候我写一什么呢？我写一个180，哎一百八是不是跟我们这个默认情况是一样的，哎，我写90，那就又换了一个方向，所以你可以通过这个角度来调整啊来调整，然后它这个，呃，它这个值的话，其实我们用度数的话表示，其实会。

会更灵活一些，当然我们这个应该也可以写一些更复杂的动画，比如说我可以写一个to top bla，哎，像这个上左是不是也可以啊，哎，也可以啊，他们可以有一些复杂的一个组合自己试试，我就不过不过过多解释了啊，当然还可以写什么呢？诶，我还可以写一个这个，诶诶如果写360度，哎360DE，那这个时候它就正好转一圈了，是不是又回来了，跟零是一个效果啊，那们还可以写什么呢？我们还写一个这个T啊叫1TURN啊1TURN 1turn叫什么呢？Turn表示圈的意思，1TURN就是一圈，一圈是不就就转回来了，哎，就转回来了，我这要如写一个点五，哎半圈啊，半圈就转到了是吧，我写一点点点二五，哎，点二五就变成横着过来的啊，所以带个表示是度数，Turn表示什么呢？Turn表示圈。

哎，表示圈，表示圈其实跟那个带是一样的啊，一特就等于三百六嘛，它是一样的啊，本质上一样的啊，这么几种写法可以设置它这个位置，但是其实常规情况下，比如说我想它往往往往往往往左走，那我一般就是突left，往右走我就拖right，常规的话这种写法会比较的简单啊叭较简单，而这些什么哎带呀，什么turn呀，一些这个复杂情况下我们可以用它啊，一般情况下这种这种就够用了啊，这种够用了，好这个是我们的说一个渐变，但是渐在的渐变我们这只写了两种颜色，那是不是只能写两种啊，哎，很明显它不是的，我们还可以写很多种颜色，比如说我再写一个这个blue啊blue啊blue好丑是吧，比如说写一个这个井号B，诶，写这么一个颜色，那这时候是不是又多了一种颜色，哎，多种颜色，然后再写什么呢？再写一个orange，哎，那这时候orra or orange or，啊orange这个。

这时候是不是等于是四种颜色了，哎四种颜色了，那这个时候我们就要有一个问题了，这四种颜色是怎么分的啊，怎么分的，那注意了默认情况下啊，默认情况下先说一下我们渐变可以什么呢？可以同时指定多个颜色，这是肯定的啊指定这个多个颜色，我们这多个颜色呢？哎，多个颜色默认情况下，哎默认情况下干嘛呢？哎，平均分配啊平均分配，诶平均分布什么意思呢？比如说现在我这写了几种颜色，我写了一共是诶12344种颜色，OK，那么我还是给它改成默认值吧。啊，这默认值啊，那么它是怎么平均分配的，因为这样默认值我们看的比较清楚一点，我们第一个颜色是不是红色呀，哎，那么最开始就是什么呢？红色啊红色，然后往下走啊，往下走1/4，然后是谁呢？然后这个位置就是黄色，黄色再往下走1/4，这就是什么呢？这就是我们这个绿色，然后再往下走就变成了我们这个这个这个叫做一个橙色，诶也就是说它等于把我们这个整个这个高度分成了四块是吧，四个点啊四个点黄黄红色再开头往下走一部分，但但这块应该不能叫1/4了，这是不是叫1/3啊，哎，1/3，因为我们要分成四个，分成四个点，那其实就是三段对吧，1/3，但是你就知道平均分配啊，黄色红色在最开头，然后下边是一个yellow，然后是BFFA，然后是我们这个orange，也就是说它们之间的这个距离是相等的啊，它一定会等距分配啊，一定会等距分配，那注意了，我说这个分。

这什么意思？有学会说，老师你这不是渐变吗？哪有一个绝对的颜色呀，哎，注意了，有绝对颜色，因为渐变是向某个颜色向某个颜色变化，那一定会有某个点是我们那个颜色达到最大值那么一个点，所以对于我们的红色来说，最纯的位置就是这儿，再往下黄色来说，最纯的位置可能就是这儿，然后我们那个绿色的位置，最纯的就应该是是这个位置，而orange最纯的一定就是在最底边，而中间这些都不是纯色，它都是发生渐变的一个位置啊，是这么一个意思啊，这么个意思，然后这里边我们也可以什么呢？

我们也可以手动指定我们这个渐变的一个什么呢？渐变的一个分布情况，分布情况为了把这情况我们简化一点啊，我把这个呢，我把这个柱调我先复制一个啊，复制一个把这柱调怎么简化呢？我就写两种颜色，我们可以简化一点，我们怎么指定，哎，比如说我在red这儿，我就可以写一个十像素啊，写10像素，那这个时候你可能这块看的话区别不大，我写大点，我写一个50像素，哎，50像素可能看的会比较明显一点，那这块50像素表示什么意思，这个50像素表示的是我红色开始的位置啊，红色开始位置，也就是说我红色是从50像素，也就是大概是这个位置开始的，也就说这个位置是我红色最浓的一个位置啊，红色最浓的一个一个位置，那那这个时候注意了，有同学说老师你上面不都是一个纯红吗？诶没错，因为我红色是第几个颜色，第一个颜色红色是第一个颜色，红色从哪。

开始从50开始，那上边就空着吗？诶上边它不会给你空着，上边会干嘛，上边就都是红色了，所以等于是从零到50就都是红色了，哎，上面纯的有没有过渡效果，没有过渡效果，然后从50开始向黄色，那才开始进行过渡，所以这50表示什么呢？表示是开始的位置，什么开始就是那个纯色，纯色开始的位置啊，它是从50的开始的，那同样我黄色我写一个，我写一个70，那表示什么呢？我黄色从从70那就开始啊从70，那70的话，这里边我们来看效果，那我红色是一个，哦，刚才我量错了，因为我整个是不是200呀，哎，那这一段等于是一个，其实这应该是50，那这应该是100，这应该是诶150，这是应该是200啊，所以红色应该是在这个范围，我们把这去掉啊，我按照100量的了，所以50像素等于是什么呢？我红色是在哪呢。

红色，那就大概是在这个位置是一个最纯的，然后往下再向黄色进行过渡，那上边50个像素都是红色啊，都是红色，那当我黄色我写一个100像素，我们好看一点啊，我写一个100像素，那这个时候表示我黄色是从100开始，100是哪百是不是正好中间啊，黄色从100开始，红色是50，红色在这个位置，那这个区域是不是就是过渡的区域，诶过渡的区域，但是黄色下边是不是没有其他颜色了，那么OK，下边就都是黄色，懂这意思吗？哎，都是黄色，所以它的默认情况下，什么默认情况下红色是零。

从零开始，黄色什么呢？黄色是200，那就是我们默认一个情况，所以这个时候你不写是是一样的啊，不写是一样的，所以这个时候就是指定的是我们这个颜色的一个起始位置啊，从哪开始啊，从哪开始，那至于结束位置，它是自己去确定啊，自己确定，所以这里边如果是我们说就是如果你像这种情况，我红色从50开始，那红色前边是不是没有颜色，哎，没有颜色，那么OK，前面就是红色，黄色从100开始，那么100后边是不是没有别的颜色了，哎，那同理，100后边也都是黄色，这是一个说的一个位置，当然我们可以接着写是吧，我可以写一个。这写一个GR，哎GR green呢，我来一个这个一百五一百五，然后我再写一一百五十像素啊，然后再写一什么呢？我写一个这个orange orange or诶orange我们来一个这个200啊200像素，那这个时候就这么一个效果，当然现在也等于是平均分配了，对吧，我可以去调整它的位置啊，比如说可以调成一百二对吧，我可以把它往往上调啊，往上调可以调整它们分布的一个一个区域啊，一个位置，当然这个的话，一些细节的时候，你需要调一下，一般情况下我们也不需要指定这么细啊，一般我们都是，呃，通常情况下啊，都是比较简单的，但是做一些比较复杂特效的时候，可能需要去，呃，需要去加强一下是吧？好，这个是我们的一个ler啊，这是一个线性渐变啊，线性渐变，然后除了这种型号跟它类似的还有一个我们叫一个background background。

GON。Image，我们叫做一个repeating，一个l agreeent，这个repeating什么意思？Repeating就是一个重复的意思，这表什么呢？这表示的是会重复的一个线性渐变，哎，叫做一个，哎可以什么呢？哎，可以平铺的一个线性渐变，线性渐变因为刚才那个渐变我们看到效果就是什么呢？比如说我红色啊，红色写的是一个50像素，那么红色就从50开始，那上边是不是都是一个红色呀？哎，上边都有一个红色，那么黄色是从100开始，那么这是一个渐变，那下边就都是一个黄色，也就是说它在假如说我元素里有空白的部分的话，如果有空白的部分我们都是用纯色去填充的，那比如说我就希望红黄红黄这么重复，那这个时候我们就可以用这个repeating的一个Le，一个greented，其实用法是一样的，你看着啊，我也写一个red，我也写一个yellow，最简单的用法就是这个。

诶，我也写一个red，也写yellow，这个时候你会发现跟它是没有任何区别，哎，没有任何区别，但是这个我可以改一下了啊，我可以写一个红色，我写一个50像素，诶黄色我写什么呢？我写一个100像素啊，100像素，那这个时候你看什么效果，诶你看我红色是50像素，黄色是100像素，也就是说他们的范围就是什么，就是从50到哪到100，从50~100，从50~100的话，等于是什么呀？50是一个红色，是红的，然后100是一个什么呢？是一个黄色，黄色，然后50和100之间是不是那个渐变效果呀，哎，那个渐变效果，所以等于我整个渐变的整个高度宽度啊也行是吧，一共就是什么，一共就是50，但是我元素的高度是多少，是200，那所以这个时候我就会采取一个平铺的一个策略，我会干嘛呢？我会让这50个像素。

重复四次，然后你看到的是不是就是就是这个效果呀，哎，就这个效果，当然其实啊，你这写五十一百行，你这写什么呢？你这写一个零。50效果也是一样的对吧？效果诶，但是不太一样，它那个就是你重复的那个，诶一样的啊，其实50跟零是一样的啊，就是重复那个位置是一样的，因为它的大小是一样的嘛，所以它主要是通过它们之间的这个这个差去去计算啊他们这个范围，那这样就可以达到一个重复效果，其实这红的我觉得可以不写对吧，不写也是一样的，那这样我就可以达到这么一个诶渐变，它会有一个这个repeat这么一个效果，但是这个东西我们也可以通过这个background repeat background一个repeat，我们写一个这个no repeat，我们来看一下，诶你会发现这个时候我们这个no repeat对他来说他会不会去起作用啊，No repeat甚至来说都不起作用了，那比如说我这再加一个，比如说我来一个to，一个right，我们来看效果，你你写一个no瑞P的，它也干嘛呀，它也没用，它还是会去重复的，所以这个时候你设置完这个渐变效果的话，这个玩意儿就没用了，也就是说它对它不会有影响。

啊，对它不会有影响，是这么一个效果，好，那这里我们就不多说了啊，这是我们的线性渐变啊，这么几种用法，然后这个细节我们也不再强调了，练习的话，我们后边遇到这种情况，我们再去再去做这个东西，但是还是强调一点，这个东西对老版本的IE的兼容性并不是很好，所以你自己了解一下知道怎么写，哎，主要现在就是这种情况，以后我们用到的时候遇到点我们再去强调它啊好，我们先停一下。