22.尚硅谷_css3_css3背景.wmv原创

先讲了。C2里面那些背景吧，是不是C2背景这块，我们最后说那个什么，说那个background one的什么，他ment吧，是不是啊，我们说这个相当于是干嘛。给评估到什么视口里面去了吧，是不是我们说最好不要用它干嘛，有性能问题是不是，而且这个东西也稍微有点老了，懂不懂，OK，你干嘛不把放到什么作为一个image呢，是吧，让它fix呢，不懂OK，好，那继续。好，那这边我们讲的是C2的背景，是不是好，现在要讲。C3道好，讲C3背景之前啊，也就是我们C3 C3对背景做了哪些扩展是吧？好，首先大家来看啊，嗯，这样吧，呃，我布置这个玻璃了，CR背景拿过来，Ctrl a ctrl c。CLLC是吧？好，是不是还是一个test好，嗯，首先我们知道background肯定是background color肯定是会被这个image压住的，是不是1IMAGE也是多背景的啊，这个是让它不评估是不是OK，那这些东西我暂时先全部干掉，是不是我让这个东西有个边框border。

给个20P吧，30P好看一点，实心的。是吧，来看看。那现在是不是就有边框了，怎么那么粗？啊，不是说他丑啊，不是这意思啊，是这个边框走好，我现在很想问一句啊，就是这个边框下面到底会不会是投票。也就是说，图片到底是从哪个盒子开始汇起来？背景图片，背景图片吗？到底是从books还是books，还是从board books还是从。首我们首先来看market，是不是啊，这马被我已经用掉了。是不是？

那暂时我们先把这个注一做啊，给一个马100PX是不是只有你有吗？有灰色图片吗？没有这个是肯定不可能的，是不是，那我就想问大家了，诶你们被经用了差不多一个月了吧。是不是背景从哪开始会起的？你就告诉我，现在不是不想问你答案，你有没有思考啊，学背景的时候到底有没有思考过，哎背景，哎，学了核模型又学背景啊，那到底背景是从哪个和模型开始选的，有没有思考过这个问题？啊，没有思考过这个问题，学习态度换一换啊，一定要10万个为什么，懂吗？一定要做一个好奇宝宝啊，那为什么？不是为什么，那到底他到底是从哪开始会开始绘制的内容区的左上角是不是啊？首先我们来看波的干嘛？波的嘛，是不是啊，你看这个白光的波的里面，我们给个什么透明的颜色呗，是不是啊，我们说rgba嘛，是不是啊，000.2是不是有点小透明的所有你看底下有没有。

有。很明显发现啊，不是从玻璃开始绘绘制的，你要你看这个点在哪。是不是在这块没有从这块开始绘制吧，上面为什么，因为你平铺了吧。Repeat，什么no repeat，看从哪开始绘制的？从哪开始不知道背景，不要管背景是干嘛，整个盒子里面都会有的。懂不懂？问题是这个背景图片啊，我刚说的背景颜色你不要管啊，背景颜色干嘛整个不都会给你照住的，除了盲点等不等，背景图片从哪从哪开始绘知道。那种区是不是加个你再看看啊。

从哪开始绘制的books？记住默认情况底下图片是从books开始绘制的啊，OK，那么默认情况下。默认情况下图片背景图片啊，不是我们这个一般就标签啊，背景图片是从什么pad pen books开始绘制。OK，这是一个点，好，那再来看。可是从哪开始剪剪裁的？什么叫剪裁啊？是不是会超出的？比如说干嘛，我说干，让你干嘛，让你repeat。从哪开始剪裁的？很明显嘛，从books开始剪裁嘛，只要超过books就干嘛，全部给你剪掉嘛，是不是OK，从books开始绘制，从什么？

从Bo books开始检查。OK，这怎么理解啊？这都是默认情况下的，懂不懂？OK，好，那就好说了，那来看C3给我们提供的第一个。是尴尬啊，把它往后挪一挪。嗯，先不讲白三。先讲白鹤广场什么？这个读这个怎么读的，我都不敢读了，什么orange吧，是不是OK，这个设置背景渲染的，其实位置来看一下，不光的什么，问下你看我们如果让你从开始学。

只有你看。嗯，他从哪，他他从哪边开始选的，很明显，从那从从那种区开始选的吧。是不是啊？你看嘛，是不是从这个内容去开始选的，其他都是什么平铺铺上去的懂吗？OK，那是不是就被我已经改掉了，那这个值到底有几个属性啊，它的它这个属性到底有几个值哦。3W点百度点com上。什么鬼？是不是啊，来看一下。打开快一点啊，我记得我笔记里面写过，怎么没了啊，可能啊，不管了，没了就没了，怎么那么慢啊，疯了，那怎么办？打开我这个。

好尴尬，是网慢看不到啊，可以来看一下。CSS是吧，看它有几个值。三个字，Board Penny是不是OK啊？知道学API怎么学吗？说实话，这个客户很不想讲为什么，因为都在讲API。这怎么理解啊？是不是你要让我上的爽一点，我就不想上AP，是不是直接录代码多开心啊。OK，那我们来看一下。Books吧？这边什么看paint books从哪开始渲染？很明显不一样的一下。打开这个，这个是从干嘛开始渲染的吧，我们刚刚写的吧，你看这是从开始渲染的吧，是不一样的，还有什么啊。Books是不是来看一下books跟渲染的一样吗？不一样吗？这能没理解啊？好，这控制的背景图从哪开始渲染好，再来看还有什么？

从哪开始减是不是，比如说这个我给它调回去是什么吧，不不不默认是什么看吧是不是OK，还有一个属性叫什么八光的什么club是不是啊好来看一下。CTRLC，从哪开始减吧，来走你，我们说默认从哪开始减的吧，这一次我让你从开始减。看见没有，是不是我让你从什么开始减？你还不得乖乖听我的，能不理解好再来看。呃，剪了之后大家看这个背景颜色还有吗？

看得到背景颜色吗？看不到的，是直接给你剪掉的，这个是这个是灰色什么不是灰色边框的颜色。这里面你讲，其实你这个背景颜色你是看不到的，懂不懂，OK，那比如说正常点的是什么，Books开始减吗？是不是。九点是不是好，那这个比较简单，一个是这是两个什么C3提功的，还有这个一发光的1IMAGE里面有一个多倍体，那也是C3里面的，懂吗？C料里面是没有，是没有这个功能的，好再来看这个还有一个用，还有一个用处。啊。CTRLV09好，不是讲CC3背景啊，就是CLA啊，这个有个什么东西要需要跟大家去说说呢，比如说现在我有一个。文字吧里面。

同刚，是不是里面有个文字，好，我让这个文字稍微大一点。嗯，怎么大一点放它吧，是不是，比如说它是80PX是不是行高给个100X，行高给三，OK为黑来看一下。嗯，应该打开它，OK，这里面是不是有一个同高啊，Text等于。Center惹你？好，是不是在这边啊，好，我让他加粗吧。这能不能写加粗啊，是不是写在这前面的。在这。完美是不是OK。我说想让这张图片。剪切怎么剪呢？就文字占据的地方有背景，其他地方都没背景，你就按照文字来剪。

就是文字外的所有的背景图片全部给我剪掉。好好像是，他说应该是有一个叫什么text，看行不行。行不行不行啊，其实有一个东西叫做we k啊，这也是we k底下才会有一个功能教你没了。没了。没。没了不应该啊啊，想一想。没了这个字的颜色是不是有关系，想想反正现你看外的不不光的，我们看这个属性有没有起作用。有没有起作用，有没有被划掉，没有被划掉说明他是有用的，是不是？问题是为什么没有出来背景。

字的颜色换成透明的是吧？塌了，把字的颜色换成透明的，想想RGBA不应该先试试吧？000.3.39，你看一下。下有没有有有有，是不是按照文字来解决的，是不是他应该是什么起作用了吧，懂不懂，这只有Y的内个底下才有，咱们学了三个哪三个啊，哪三个描边文字描边。倒影加上这个，这个叫什么。按文字剪切背景懂吗？OK，按文字剪切背景啊，Back的啊，OK，那这是说的么？两个现在里面好，还看现在里面又给我们提供什么back望的S大家记不记得图片它有一个。

特性图片有个特性叫做高宽自适应。是不是也高，也就什么改了宽度高度就能支持性的，为了让你这个图片不变形，画质干嘛不受影响，是不是啊，OK，我们来看一下，那比如说哎，我们再来讲最后一个C3的东西，C3背景。OK，它背景里面最后一个叫什么back side吧，现在我们不看我们是不是干嘛外是害的都是300乘以300啊，你看这个背景是怎么进来的。平估的吧，放到平铺能人配的只你你看是不是本来你多大我在里面选染就有多大是不是，那我现在想让你让我这个盒子一样大，应该用什么。白光的，这是C3给我们提供的是吧？3OK，如果我第一个直线百分百代表你X轴干嘛。

跟我这个区一样，外轴呢自适应，因为你改了一边嘛，自适应嘛，你想让这张图片完全的平铺在里边怎么办？必须写。两个百分百，这时候图片是会变形的，懂吗？OK，来看一下百好百设置比例图片的大小，默认只是凹凸凹凸吧，百分比干嘛指定背景图片区域相对于背景区的百分比什么意思啊？这个百分比称的谁的？背景区域的懂不懂？背景区域有back什么二进来设置懂不懂？OK，你看我现在这背景是不是就是我的books啊，你看嘛啊，不是我的paint books吧，如果变成books，大家来看看这点，你看是不是就这样的，能不理解？OK，我们来看一下，那它里面有个什么单值的时候，这个值指定图片的宽度高度，影视函数为凹凸，什么意思啊？你动了我的宽度，我凹凸吗？给你制适音吗？

你想让我这张图片干嘛？完完全全的在我这个盒子里面百分百的展示啊，有可能会变形的，怎么做？白普光的size为百分百，百分百，对不是，如果你只写一个，其实后面那个是。凹凸你看是不一样的，图片是不会变形的，你看这样的话，他明显就干嘛胖了。整点明显胖了吧，是不是啊，OK，整点好，那最后讲一下，最后讲一下什么呢？节节属性单光了啊，这个结限属性其实太它是不是所包含的值太多了，一般像这种东西的话，我是不建议你们去写结节属性的啊，因为有一个覆盖的问题啊，这个覆盖的题，而且很难排查。我们来看一下什么意思啊。比说我来写一下一个剪切属性嘛，CTRLV11，好来看一下现在我是不是上面的东西全部已经定好了，不看光的是不是有个简介属性啊，来一个U。

诶，这是什么鬼，喂，同钢点偏激吧，是不是看一下。你看是不是变成这样了，如果不写呢？一样吗？一样吗？完全不一样吗？是不是你这么一写，上面干嘛整段垮掉？里面都是这是一个简写属性啊，有好多默认值啊，你是不是把上面的属性全部覆盖掉了，你说你这上面做什么，大半天发现最终写个白胡子把上面的全部覆盖掉，是不是现在我们要是简单啊，你以后写工程化的样式写的特别特别多呢，好排查吗？极其不好排查，一般当简写属性的样式超过三条或者四条了啊，一般超过三条我就不用了，对吧？当简写属性它的属性值如果是包含三条样式的，一般我就不用了，三条往上啊，如果是三条的那我还可供，因为我能记住对不对，你这里面包含多少个了。

这八个了吧，你换谁谁能记住啊，我反正记不住懂不懂，所以会给你带来困扰的，一般这种属性我不推荐你们去白光的。等等，你去给我当个什么？拆开怎么讲OK？嗯，好，那一般还有一种他们比较简便的做法，什么呢？就是说图片跟楼主P的干嘛都会放在这个简里面去懂不懂，其他背景要是全部放在它下面去写能没讲，这需要你自己编码的时候有自己的编码规范。能不能讲你说你你编码的时候，你么从来都是这么写的，你不会把背景分什么几个地方去写的，背景就在我这一块懂不懂，那你可以去用这种写，懂不懂，那具体怎么用，看你自己好不好，OK。好，这一块背景全部讲完。

想想还有什么没讲，看看一下。没问题了是吧，五个C2的背景属性，三个而不四个，什么背景属性多少搞搞清楚。