尚硅谷前端基础 (90)

好，那么关于我们这个背景的基础知识呢，我们就给他说完了啊，其实也比较简单，它就是会有一些东西会稍微有点多啊，你可能需要稍微的去记一下，嗯，但是我还是强调一点，这些东西呢，现在不用你去，呃，如果能记啊，最好记下来，如果你说老师我觉得东西太多了，实在记不下来，嗯，我不要求你去刻意去记这个东西，因为确实的话也没什么必要，呃，因为这些属性，其实我们常用的像color啊，Image啊这些东西肯定能记住repeat啊，Position这些东西对吧，那有一些可能你用的不多的，诶，用的不多的那种东西，你最好你就有一个印象，哎，忘的时候，哎，查查笔记呀，哎，查查这个文档啊，能查到哎就最好了啊，所以不用刻意去记它，那接下来呢，哎，我们来说一些练习，练习的话呢，我在这儿的话，我的资料里有一个这个图片，我们来看一下啊，我们的图片里边有这么一个啊，这是。

这以前呃，很多年以前，我截了一个这个YCD的这个官网的一个整页的一个图片啊，整这一个图片，那这个图片你注意了，我们来看一下，呃，当我们去打开一个图片的时候，我们的Photoshop它默认是把这个图片完整的呈现到你的屏幕当中的，所以就有时候这个图片可能放的会比较的小，所以这个时候我们可以在这儿，诶在这儿你可以去设置它的这个比率是吧，比如说写一个100啊100%，那这个时候就就就就正常了，对吧？或者呢，你也可以通过你的鼠标滚轮去滚动它，摁着alt键，摁着alt键滚动滚轮，诶往上滚就大，往下滚就就小啊就这么简单，那这个我们要做什么呢？哎，哪个是背景相关的呢？诶我们来看一下，在这个YCD这个网站的最上方，它这儿会有一个这个，诶这么一个导航条啊导航条，那现在呢，诶，我们来尝试做了一个导航条，那当然这个导航条本身也并不是很难，但是。

我们也不是要做整个导航条，我们做的是什么呢？诶这个导航条的背景啊，它比较特殊，哎，如果你仔细看的话，你发现它不是一个纯色是吧？我们在Photoshop里怎么取颜色，你看左边这儿有这么一块儿，对吧，我直接点这一块一点那个浅景色对吧？实色系你吸看这F1 f1f1，再往下吸ec ec ec，再往下吸161616，诶也就说你会发现我的整个这一块，它的颜色它是不是一个，这个是不是同一个颜色呀？哎，不是，它实际上是有一个变化，那这个用我们的话说叫做什么呢？叫做一个渐变啊，从上往下做了这么一个渐变的一个效果，那现在这个效果用我们现有的手段当然不能实现，但是我们CSS3里面有渐变啊，有渐变，但是现在还没有学，那我们现在假设这么一个情况，我们还没有学这个渐变，但是我现在要做这么一个渐变效果，那要怎么变啊，那要怎么办，那其实很简。

哎，图在这儿我们是不是已经有了，哎，图我们已经有了，所以这个时候呢，哎，我们只需要把这个东西是不是设置为我们那个框框的一个背景就行了，哎我们来看怎么设置，那首先呢，哎，我们在这儿啊这个练习非常简单，哎我们在这儿呢，新建一个文件啊，我们叫做一个诶这好像有名儿起重了是吧，改个名儿，这个我们叫一个零六啊零六诶然后呢，我们在这儿啊新建一个文件，我们叫做一个零七啊零七我们这个是一什么呢？这个主要是说的是一个我们这个背景的一个这个诶重复的一个问题啊，背景的重复一个问题，诶我们怎么让这个背景去重复，那这里边我们要做的是这么一个导航条，那当然我们先要整一个元素，是不把这个导航条表示出来，哎表示出来，所以这个时候我们就简单点写，我直接在这儿创建一个页面，页面结构，页面结构啊，页面里边我们放一个div，我简单一点。

啊，Div点一个BOX1，那注意了，这个div的宽度无所谓啊，宽度无所谓，我们写一个点BOX1宽度的话，Y比如说我写一个1000像素啊，写一个1000像素，哎没有写我们的这个style标签，Style标签我们这是一个点一个BOX1BOX1Y我们给它来个1000个像素，宽度无所谓，因为这块你导航条爱多宽，多宽是无所谓，但是你也可以量一下它到底多宽，那比如说这个我们想知道它这个图里这个导航条多宽，我们要怎么办呢？诶选中我们这个右上左上角，这有一个矩形选择框啊矩形选择框然后呢，你通过拖动这个矩形选择框，比如说你就可以通过什么呢？诶你可以从我们这个框的一个左上角开始拖，诶一直拖到什么呢？诶拖到它的右下角。这样在这儿的话，就可以显示出它的框的一个这个高度，还有宽度是一个九百九乘以一个320，哎，当然你这块框当你脱没了以后，那个数据是不是就没了呀？诶你可以摁你键盘上的F8来显示这个信息，Y是990 hide是三百二之前，诶32啊，32之前我们把这个单位已经改了，所以这个时候这就是像素啊，所以这个如果你要想跟图里一样的话，那就是Y是一个990像素，而我们这个hi是一个32个像素，哎，我们给它设置一个background，我们看到它啊来个red，然后呢，这我们只给它设置一个这个。

设置一个居中啊margin，我们来一个这个零，然后来一个凹凸，然后呢，我们来看一下它的效果，诶这这是还这钢铁侠的对吧，我们打开一下，诶，那这个条我们是不是就给它长出来了，这大小就跟我们这个图里边是一模一样的了，当然样式是不是还有点差距，哎，它不是一个红色，所以你设置这红色呀，不合适，那我怎么给它设置颜色，那我们来看一下我们的这个导航条，它是一个从上往进行渐变的，也就说它的渐变只发生在从上到下水平方向有没有渐变，水平方向并没有发生渐变，那么这个时候其实我们就可以这样，怎么样呢？诶，我可以直接从我的这个条上取一个像素大小，这么一个块就取一个像素，然后把这一个像素在我的元素里边，直接进行水平方向的一个重复，那这样我的这个渐变的。

这个背景颜色是不是就会应用到了我们那个块上了，哎，我们来试试啊，试试先来看我们怎么截一个一个像素，其实我这这宽度就一个像素了是吧，我们可以给它放大一点啊，放大一点你看这一小格就是一个像素啊，然后我们通过这呢，从上往下一拖，正好拖一个这么大个的是一个32高是32宽是二一个像素，那现在我们要做的事是不是只想把这一块，诶我还少一块是吧，你再拖一下。

是不是把这一块给它截出来，然后作为背景给它保存呀？诶那要怎么做？直接点击我们这个图像，图像上边我们这有一个裁剪，直接点裁剪，你看效果，它就可以把这一个像素给我们裁出来了啊，裁出来以后我们直接文件点击它有一个导出啊，导出导出这有一个叫做存储为web所用格式，当然你也可以点这个啊，快速导出编辑，我还是选择一个存储为web存格式，因为这里面的信息会比较全，直接一点，这什么作用，就是把我们刚才切的这个图片给它干嘛呢？给它截出来啊，给它截出来直接点击存储，点击完存储以后，这个就是我们切的图片，在这儿可以选择图片的格式，现在给你选的是一个GIF，在这个位置，它可以显示这个图片的一个大小，也就是说如果我用GIF去保存这个图片的话，它的大小。

有155个字节，诶那么好，我把它调整大一点，诶现在调成JPG大小是330字节，那JPG是不是比较大呀，我们来看看PG24啊，我们用PG24 PG24是一个155，那也就是说GIF跟PNG是不是一样的呀？哎，PNG是一样的，然后呢，那我们就选择PNG啊，你就是优先还是使用这个PNG，而且这儿你看啊，它还能给你显示一个时间，写了一个一秒什么意思，这表什么呀？你在一个56KB的一个网速下边，它的下载速度是一个一秒，你还可以选是吧，你可以选，你可以选这个网速啊，你选那个网速我们就不演示了，比如一兆那一秒，它一秒就最低的，对吧，你至少得花费一秒，对吧？是这么一个意思啊，你可以去选择这个带宽，然后去看一下它的下载时间，当然我们在这儿就选择一个最小的，诶，但是也要保证那个效果比较好，当然我们就这一个像素无所谓了啊，然后直接点击存储，存储到我的。

桌面这个桌面呢，我叫一个这个BD，点一个PD，这个图片存完了，我来看一下，这就是刚才我从这切出图片，诶现在能看这个图片什么效果吗？哎，看不出来，诶没关系，我们来用一下你就你就明白了啊在这里边呢，我来MG这里边我们新建一个文件夹，文件夹我们这儿叫做一个007了，该零七，然后我把这个背景图片啊，我给它拖进来，好，我们把这个图片啊给它拖进来以后，那现在我们就可以把这个图片设置为我们这个div的一个背景图片了啊在这里边我们直接给它来一个叫做一个background，一个这个image background一个这个image，我们这儿直接来一个URL，写一下我们的一个路径，哎，点我们的这个什么呢？Img下的一个，我们这个是一个零七下的一个这个BG。

点一个PNG，那现在我们是不是就成功的把我们的这个图片设置成背景图片了，那现在由于什么呢？我们刚才截的这个背景图片啊，哎，这个背景图片它的大小高度正好是一个多大来着。正好是一个这个32，而我们这个元素是不是也是一个正好是32啊，所以这个高度的话，其实我们都不用不用再去调了，但是我们希望的是效果是这个图片是什么，它用不用垂直方向再去重复了，哎不需要了，它是只需要水平方向去重复，哎，所以重复方式的话，我们最好再给他写一个，写一个什么呢？写一个P的X，哎，你告诉他水平方向重复垂直方向就不需要重复了，但是这句话其实在这儿来讲写的都行，因为它俩高度一样，垂直方向已经撑满了，它不可能重复了，所以写完了以后，我们看效果是不是就得到了这么一个这个导航条啊，哎，那你会发现其实跟这个效果是不是是不是是不是一样的呀，哎，跟它是一个一样的，那我们是怎么做到的，就是给它截了一个像素，然后让这一个像素在元素当中水平方向平铺，就达到了这样一个效果啊，但是注意前提有一个前提，你的这个图片跟你的元。

跟速的高度得是一样的，如果你高度不一样，你高度不一样，那会出现什么情况呀？哎，那垂直方向也会平图，那像这个东西我们如果用简写属性的话，那就一行搞定，直接background下边的我们这个URLURL下边我们点一个img下边的一个零七，然后是我们的一个BG，点一个这个PG，然后呢，再写一个P的X，诶效果就一样啊，效果一样好，那这个是我们一个非常非常的简单的一个练习啊，自己来尝试把它做一下，哎，主要是对这个repeat X repeat去理解一下啊，当然纵向呢也是一样啊，都是同理的，我们先停一下。