css背景 背景颜色 颜色渐变

背景全屏

body{
	background-image: url(../imgs/bj.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
 background-attachment:fixed;
}

div{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/*background-image: url(../imgs/banner3.jpg);*/
	background-color: pink;
	background-repeat: no-repeat;
	background-size: cover;
}

背景色高度自适应：

min-height: 100%; height: auto；

1、背景图地址

background-image: url(timg.jpg);

2、背景图是否重复

background-repeat: no-repeat;

3、背景图固定

background-attachment:fixed; //【固定】scroll【随窗口滚动】local【随元素滚动】

4、css3背景图像定位

background-position: 100px 100px;//（50%容器中间 100%容器右下角）[水平、垂直]

*可用属性：left right top bottom center

*雪碧图

background-origin属性指定background-position属性应该是相对位置。

语法：background-origin: padding-box、border-box、content-box

兼容性：IE9+、Firefox4+、Chrome、Safari5+、Opera

5、css3背景图像大小

background-size:100% 100%; //【背景图片在浏览器中满屏显示】

*设置100% 图片按照容器的比例撑满，水平，垂直，图片会变形

*cover(把背景图放大到适合容器的尺寸，图片比例不会发生改变)

语法：background-size: length、percentage、cover、contain

兼容性：IE9+、Firefox4+、Chrome、Safari5+、Opera

6、css3背景图像区域

background-clip属性指定背景绘制区域。

语法：background-clip: border-box、padding-box、content-box

兼容性：IE9+、Firefox、Chrome、Safari、Opera

7、css3多重背景图像

语法：background-image: url(img1.jpg), url(img2.png);

 

二、渐变

兼容性：IE10+、 Chrome26+、 Firefox16+、 Safari6.1+、 Opera12.1+、10.0 -webkit- 3.6 -moz- 5.1 -webkit- 11.6 -o-

1、线性渐变(Linear Gradients)

 

①线性渐变 - 从上到下 (默认) 颜色结点

语法：

background: linear-gradient(red,blue,green);

 

②线性渐变 - 从左往右 

语法:

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 

 

③从左上角到右下角的线性渐变：

语法:

background: linear-gradient(to bottom right, red, yellow);

 

④带有指定的角度的线性渐变：

语法:

background: linear-gradient(-90deg, red, yellow);

 

 

⑤重复的线性渐变：

语法：

background: repeating-linear-gradient(red, yellow 10%, green 20%);

 

 

 

2、径向渐变

①颜色结点均匀分布 (默认)

语法：

background: radial-gradient(red, green, blue);

 

 

 

 

②颜色结点不均匀分布的径向渐变：

语法：

background: radial-gradient(red 5%, yellow 15%, green 60%);

 

③设置形状circle表示圆形，ellipse表示椭圆形，默认值是 ellipse：

语法：

background: radial-gradient(circle, red, yellow, green);

 

 

不同尺寸大小关键字的使用

closest-side : 最近边；farthest-side : 最远边

closest-corner : 最近角；farthest-corner: 最远角

语法：

background: radial-gradient(closest-side at 60% 55%, red, yellow, black);

background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

 

重复的径向渐变

语法：

background: repeating-radial-gradient(red, yellow 10%, green 15%);