目录
开始
背景+颜色
将图片当做背景background-image:url(bg-h.gif);
x方向（横向）重复显示图片：
y方向（纵向）
不重复显示图片background-repeat:no-repeat;
规定位置显示图片background-position:200px 100px;
规定百分比位置显示图片background-position:30% 60%;
附着显示图片background-attachment:fixed;
中心显示图片background-position:center;
span display：none
span display：block
开始
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--h1{font-family:黑体}p{font-family: Arial, "Times New Roman"}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
背景+颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--h1{font-family:黑体;background-color:blue;color:white;}p{font-family: Arial, "Times New Roman"}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
将图片当做背景background-image:url(bg-h.gif);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(bg.gif);}h1{font-family:黑体;background-image:url(bg-h.gif);color:black;}p{font-family: Arial, "Times New Roman";background-color:white}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
x方向（横向）重复显示图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2}h1{font-family:黑体;color:white;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
y方向（纵向）
background-repeat:repeat-y;
不重复显示图片background-repeat:no-repeat;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:right bottom;}h1{font-family:黑体;color:black;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
规定位置显示图片background-position:200px 100px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:200px 100px;}h1{font-family:黑体;color:black;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
规定百分比位置显示图片background-position:30% 60%;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:30% 60%;}h1{font-family:黑体;color:black;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
附着显示图片background-attachment:fixed;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:30% 60%;background-attachment:fixed;}h1{font-family:黑体;color:black;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
中心显示图片background-position:center;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2}h1{ height:40px;background-image:url(h1.jpg);background-repeat:no-repeat;background-position:center;}p{font-family: Arial, "Times New Roman";}--></style></head><body><h1><span>互联网发展的起源</span></h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
span display：none
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>体验CSS</title><style type="text/css"><!--body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2}h1{ height:40px;background-image:url(h1.jpg);background-repeat:no-repeat;background-position:center;}p{font-family: Arial, "Times New Roman";}span{display:none;}--></style></head><body><h1><span>互联网发展的起源</span></h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p><p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></body></html>
span display：block
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>滑动门演示</title><style type="text/css">h3{font-size:13px;line-height:21px;text-align:center;background-image:url(bg-slide.gif);background-repeat:no-repeat;padding-left:40px;color:white;}span{display:block;padding-right:40px;background-image:url(bg-slide.gif);background-repeat:no-repeat;background-position:right;}.wide{width:300px; /*修改这个数值，即可改变宽度，可以保持两端的花纹*/}.narrow{width:200px; /*修改这个数值，即可改变宽度，可以保持两端的花纹*/}</style></head><body><h3 class="wide"><span>h3标题文字（宽）</span></h3><h3 class="narrow"><span>h3标题文字（窄）</span></h3><p>说明：只需要修改h3标记CSS中的width属性即可，只要宽度不超过背景图像的总宽度即可。</p></body></html>
