CSS 背景 颜色 图片 线性渐变 圆形渐变

CSS中，background-color属性在 image属性的下层。

background-image:url(images/150.png);如果叠加显示，CSS 规则中先列出的图片在上层 

background-repeat:no-repeat;  |  repeat-x;  |  repeat-y;

background-position:50% 50%;  |  center ;  |  (默认左上角的点为原点,就像一个Y轴颠倒的数轴，第一象限，原点位置x,y=0%)使用数值时，第一个值表示X轴位置，第二个值表示Y轴位置。要是只设定一个值，则将其用来设定X轴位置，而Y轴位置会被设为 center。可以使用负值。

在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。换句话说，如果设定了
33% 33%，则图片水平 33%的位置与元素水平 33%的位置对齐。垂直方面也一样。

background-size：
50%：缩放图片，填充一半（不保持高宽比）
100px 70px；
cover：完全填充背景（不保持高宽比）；
contain：使其在背景区内，图片高宽比不变。

background-attachment :

scroll （默认）背景图片随元素移动而移动

fixed 

 

background:linear-gradient （线性渐变）

栗子1，起点：

background:linear-gradient(#666, #fff);（默认：从上到下）
background:linear-gradient(left, #666, #fff);从左到右，
background:linear-gradient(-45deg, #666, #fff); (默认开始点中上，-45度，变成了左上)

栗子2，设置渐变点（该点设定为该颜色，并从该点开始渐变）：

background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);

/*50%处有一个渐变点，开始和结束位置没有声明，默认为 0%和 100%。*/

background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);/*20%和 80%处有两个渐变点

起点和终点不是 0%和 100%。此时，在第一个渐变点（20%）
之前，是第一个渐变点声明的实色，而在该点之后，则是从该颜色到下一个渐变点
颜色的过渡。同样，在最后一个渐变点（80%）之后，该渐变点的颜色会以实色扩展
到元素结束。

background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,#64d1dd);/*25%、 50%、 75%处有三个渐变点*/

background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43);/*为同一个渐变点设定两种颜色可以得到突变效果*/

background: radial-gradient：(放射渐变)

栗子：

background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);默认的渐变形状，即渐变效果会填充元素（从圆心开始渐变，可能是椭圆和圆形，取决于盒子的形状）

background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);（圆形）

background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,#4947ba);（指定位置，圆形）

转载于:https://www.cnblogs.com/xinfangzhang/p/6773902.html