1. 背景图像基础
body{
background-image:url(pattern.jpg);
background-repeat:repeat-x;
background-color:#ccc;
}
background-image总是在background-color之前，可以使用这个方法处理图像在高度不够的情况。
设置图像位置的两种方法：像素和百分比
2. 圆角框的实现
2.1 固定宽度的圆角框
<style type="text/css">
h2 {
color: #94b767;
}
.box {
width: 418px;
background: #effce7 url(img/bottom.gif) no-repeat left bottom;
padding-bottom: 1px;
}
.box h2 {
background: url(img/top.gif) no-repeat left top;
margin-top: 0;
padding: 20px 20px 0 20px;
}
.box p {
padding: 0 20px;
}
</style>
</head>
<body>
<h1>Simple, Fixed Rounded Corner Box</h1>
<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
</body>
原理box上设置下面的框，h1上设置上面的框。只适用于固定宽度的。不能水平扩展。
2.2 滑动门
<style type="text/css">
h2 {
color: #94b767;
}
.box {
width: 20em;
background: url(img/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(img/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1px;
}
.box-inner {
background: url(img/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(img/top-right.gif) no-repeat right top;
padding-top: 1em;
}
.box h2, .box p {
padding-left: 1em;
padding-right: 1em;
}
</style>
</head>
<body>
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
</div>
</div>
</body>
又称为滑动门技术，添加inner，outer用于添加背景图像。box设置左底角图像很大，outer设置右下角，inner设置左上角，h2设置右上角。可以加宽,高，但需要添加多余的标签。可以利用一个标签上设置多个背景图像的方法。减少不必要的标签。
2.3山顶角
原理利用蒙版实现圆角
<style type="text/css">
.box {
width: 30em;
background: #89ac11 url(img/mtop-left.gif) left top no-repeat;
color: #fff;
padding: 2em 2em 1em 2em;
margin-top: 2em;
}
h2 {
margin-top: 0;
font-size: 1.6em;
}
.box {
background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
</style>
</head>
<body>
<div class="box">
<h2>My Rounded Corner Box</h2>
<p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p>
</div>
2.4 border-radius
2.5 border-image
设置border的背景图像
详见w3c例子
3. css视差效果
当窗口大小改变时可以发现背景图像在动，利用百分比法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Parallax Effect | Chapter 4 | CSS Mastery </title>
</head>
<style type="text/css">
/* pretty */
.content {
max-width: 61em; /* 1098px */
margin: 0 auto;
padding: 100px 20px 0 20px;
}
/* parallax effect */
body {
background-image: url(img/bg-rear.gif);
background-repeat: repeat-x;
background-color: #d3ff99;
background-position: 20% 0;
}
.midground {
background-image: url(img/bg-mid.png);
background-repeat: repeat-x;
background-color: transparent;
background-position: 40% 0;
}
.foreground{
background-image: url(img/bg-front.png);
background-repeat: repeat-x;
background-color: transparent;
background-position: 150% 0;
}
</style>
</head>
<body>
<div class="midground">
<div class="foreground">
<div class="content">
<h1>Your content will go here!</h1>
</div>
</div>
</div>
</body>
</html>
4. 图像替换
主要解决的问题搜索引擎识别文本而不能读取图像。使用新颖的字体。
4.1 FIR方法
h2{
background-image:url(hello_world.gif) no-repeat;
width:150px;
height:35px;
}
span{
display:none;
}
<h2>
<span>hello world</span>
</h2>
原理：将文本display设置为none；但又严重缺陷：许多屏幕阅读器会忽略display值为none或visibility为hidden的元素。建议不要使用（屏幕阅读器是指将显示内容转为声音或盲文显示，帮助特殊人群）。
4.2 Phark方法
h2{
background-image:url(hello_world.gif) no-repeat;
width:150px;
height:35px;
text-indent:-5000px;
}
<h2>hello word</h2>
原理使用很大的文本缩进，解决屏幕阅读器的问题，但当关闭图像，打开css是无效，我们开不见文本。
4.3 sIFR技术
总结
学习了背景的像素百分比定位
学习了设置圆框的几种方法（固定宽度，滑动门，山顶角，border-radius，border-image）
学习了css视差（关键是背景百分比定位）
学习了图像替换技术（display：none，text-indent：-5000px）；
