标签：
<!DOCTYPE html>
<link rel="stylesheet" href="css/style.css">
CSS5-背景
常用图像格式
web图片格式
jpg 24位 1600万色 适用：照片，复杂图片，有损压缩图片小（常用）
gif 256色 动画 透明 适用：简单动画
png 8位 256色 透明 适用：简单小图标（常用）
png 24位 1600万色 Alpha（半透明） 适用：照片，复杂图片，无损压缩图片大 （ie6不支持半透明，不常用）
照片用jpg
动画用gif
简单图片或者小图标使用png8
半透明图片使用png24
非web图片格式
psd ps源文件
ico 图标
bmp windows系统默认图片格式，不压缩，体积大
raw：数字底片
tif：osx系统默认图片格式，印刷行业专用格式
网页图片分类
前景图：HTML标签<img>载入
背景图：CSS属性 background载入
网页什么时候使用什么方式载入图片？
background-color
指定对象的背景颜色
.test{background-color:#f00;}
background-image
指定对象的背景图像
none 默认无背景图
url路径 指定背景图片路径（注意路径，是css文件相对图片路径，不是网页文件相对于图片的路径）
.test{background-image:url(images/test1.jpg);}
background-repeat
指定对象的背景图像如何铺排填充。
repeat 默认，背景图横向纵向平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat: 不平铺
.test{background-repeat:repeat-x;}
background-position
指定对象的背景图像位置
数值
数值单位可为px % em，可为负值
1个值时为left，从左开始位移
2个值时为 left/top 左/上
单词
center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始。
.test{
background:url(test1.jpg);
background-repeat:no-repeat;
background-position:-20px 20px;/*left-20px top20px*/
background-position:center;/*居中*/
background-position:50px top;/*从left50px，顶到top*/
}
背景图片属性简写：颜色，图片，平铺，定位
.test{background:#fff url(img.png) no-repeat 0 0;}
css sprints定位技术
先设定标签宽高，x、y轴都为负值（网页坐标轴的原点是左上角，举例：窗纸和背景画）
一般图片做成长条，x为0，只移动y轴
.test{width:30px; height:30px; background:url(images/sprite.png) no-repeat -5px -10px;}
<style>
/*
body{background-image:url(images/gezi3.png);}
*/
div{
width:300px;
height:200px;
/*
background-color:#f00;
background-image:url(images/025bcb1589e57b7b5e42e480b54a77fd.jpg);
background-repeat:no-repeat;
background-position:center;
*/
/*简写，常用*/
background:#f00 url(images/pinpai.gif) no-repeat 50px 100px;
}
</style>
<div></div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<hr>
css sprints定位技术
<style>
a{
display:inline-block;
width:70px;
height:21px;
background:url(images/beijin.png) no-repeat -16px -160px;
text-indent:-9999px;
}
a:hover{background-position:-104px -160px;}
</style>
<a href="###">个人中心</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
标签：
原文地址：http://www.cnblogs.com/lyp123/p/5663001.html
