CSS3-background-image

background-image;属性
一.添加渐变颜色值linear-gradient() 和radial-gradient();渐变颜色生成器
linear-gradient(#0f0,f00);渐变颜色线性渐变
radial-gradient是径向渐变
linear-gradient和radial-gradient把它当成图片来看待只能写在background-image里面

二:background-image:url(),url();可以添加多个背景图片而且不限于二个css3出现
第一张图片覆盖住第二种图片

三,background-size:100px 200px ，100px 200px;设置俩张图片就加值前后俩张
bakcgorund-position:0,0(想体现主要内容就必须写img不能写背景)
一般情况下用户加载速度过慢就先展示第二张图片,然后填充第一张图片

四 background-origin:;background-clip;
background-attachment;background-size;
background-repeat;
bakcgorund-origin:;是让图片从哪里起始是从margin还是padding…
background-origin:border-boxl;代表从border开始 padding-box代表从padding开始
content代表从内容区开始
属性如果设置background-origin:no-repeat;之后背景图片填充不到的地方就不拿repeat来重复平铺规定了图片从哪块开始渲染但是 background-origin:;是让图片从哪里起始是从margin还是padding…
background-origin:border-box;代表从border开始 padding-box代表从padding开始 content…
属性如果设置background-origin:no-repeat;之后背景图片填充不到的地方就不拿repeat来重复平铺
规定了图片从哪块开始渲染但是没有规定哪块结束渲染,但凡盒子一部分延续原来顺序一直到
margin都可以
origin:padding-box是默认值
background-repeat:no-repeat;background-position:20px 20px;
origin是谁position就相当于谁的左顶点进行开始定位

background-clip:border-box;//默认值是border-box
background-clip:padding-box;clip是让背景图片从哪块开始截断,打哪块以外部分不显示背景图片
设置了padding-box就让背景图片padding以外就截止,到border一圈都不会再显示
background-origin和background-clip配合使用最佳
//border-box padding-box content-box text

background-clip:text;
background-clip:text截取除了文字体的区域其它区域都不能展示背景图片
只在-webkit-下好用-webkit-background-clip:text;还需要配合属性来写
background-clip:text;
-webkit-text-fill-coll:transparent;
text-fill-color:transparent;

background-repeat:repeat-x;可以添加repeat-y,round平铺,space不压缩图片填充
round space俩值一起添加横方向round 纵方向space也可以space round
background-repeat:repeat-x;就相当于Y值是no-repeat
background-repeat:round repeat-y;这样写round就失效了 repeat-y就代表俩值

overflow:scroll;纵向超出增加纵向滚动条,横向就出横向滚动条,正常情况下背景图片是根据
容器来定义不是根据内容来一起滚动attachment就是用来改变定位属性可以和内容一起滚动
background-attachment:scroll;//默认值 不跟内容走 local值会跟随内容移动

background-size:cover;
值cover,contain都是一张图片充当背景图片规则不一样
cover用一张图片填充容易并且一定会一张图片填充满哪怕图片大到超出容器(不改变图片情况下)
contain不改变图片比例情况下让容器包含一张完整背景图片
background-size:cover不可能出现俩张图片

background-image:linear-gradient(green,red)渐变效果 默认从上到下
linear-gradient:第一个值可以添加方向比如to right朝右 只能写俩个方向最多
0deg,旋转从下往上90deg从左向右90deg

一旦不设置border-color时候css2里面让border-color默认值等于color 默认值计算color值赋值过去