补充css样式

透明度

1. opacity：整个元素（盒子）的透明度，取值0~1

.box{
	opacity: 0.5;
}

2. 在颜色位置设置alpha通道（rgba）

.box{
	color: rgba(0, 0, 0, 0.5);
}

鼠标样式

属性：cursor
若设置为图片，则图片格式需为.ico或.cur

div{
	cursor: pointer; 
}

div{
	cursor: url("img/myicon.ico"), auto;  //若图片出现问题，使用浏览器默认鼠标样式
}

盒子的隐藏

• display：none 不生成盒子（影响到其它盒子的排列）
• visibility：hidden 生成盒子，从视觉上移除盒子，盒子仍然占据空间

背景图

与img元素区别

img属于html的概念，背景图属于css的概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化修饰页面时，必须使用背景图

涉及属性

1.background-image ：设置背景图

body{
	background-image: url("image/header.png"); //相对路径
}

2. background-repeat（background-repeat-x/background-repeat-y）：设置背景图是否在横坐标和纵坐标重复铺排
   默认情况下，背景图会在横坐标和纵坐标重复

• no-repeat
• repeat-x
• repeat-y
• repeat（默认值）

3.background-size：表示背景图的尺寸
默认按照图片尺寸显示
（1） 预设值

• contain：保证图片完整显示，且不改变比例
• cover：图片撑满，且比例不变，则图片有些部分会被隐藏

（2） 百分比/数值
横向纵向比列可能发生变化
background-size: 100% 100%;//横向、纵向

div{
	background: 
}

4. background-position：设置背景图的位置

（1）预设值

• center：横、纵向居中
• top
• left
• right
• bottom

div{
	background-position: center top;
}

（2）具体的数值
雪碧图（精灵图）

div{
	height: 30px;
	width: 30px;
	background-image: url("img/s.png');
	background-repeat: no-repeat;
	background-position: -51px -33px;
}

5.background-attachment：控制背景图是否固定

body{
	background-image: url("img/mian.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;//背景图相对于视口
}

6. 背景图和背景颜色混用
   可一起设置，无背景图片会用背景色填充

7.background：速写属性
图片地址 重复 位置/尺寸 固定 背景颜色
（可省略属性）