渐变
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8″ />
<title>Super-Easy Blendy Backgrounds: Example 7</title><
style type=“text/css”>
.grad img {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.box {
border: solid orange 2px;
float: left;
margin: 1px;
position: relative;
width: 165px;
padding: 5px;
}
.box * {
margin: 0px;
position: relative;
z-index: 1;
}
* html .grad {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=‘grad_white.png’, sizingMethod=’scale’);
}
* html .grad img {
display: none;
}
* html .box {
position:static;
}
.blue {
background-color: #2382a1;
}
.green {
background-color: #4be22d;
}
.pink {
background-color: #ff009d;
}</
style><!–[if
IE 7]>
<style type=“text/css”>
.box {
border: solid red 2px;
height:2.5em;
}
</style>
<![endif]–></
head><
body>
<div class=“box grad blue”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
<div class=“box grad pink”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
<div class=“box grad green”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
</body>
</html>
body>
<div class=“box grad blue”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
<div class=“box grad pink”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
<div class=“box grad green”>
<img src=“grad_white.png” />
<p>Ooo, <a href=“#”>linked text</a>!</p>
</div>
</body>
</html>
