132 lines
4.0 KiB
HTML
132 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test of CSS3 background-position 4 values</title>
|
|
<style>
|
|
.diamond { width: 10px; height: 10px; background-image: url("./resources/diamond.png"); position:relative; line-height:0; }
|
|
.ring { width: 42px; height: 42px; background-image: url("./resources/ring.png"); position:relative; line-height:0; }
|
|
.box { width: 100px; height: 100px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table border cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:15px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:80px; top:80px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:0px; top:0px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:15px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:0px; top:15px;"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:0px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:90px; top:15px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:45px;"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:45px; top:20px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:45px; top:20px"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:30px; top:45px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:20px; top:0px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:45px; top:45px"></div>
|
|
<div class="ring" style="left:0px; top:28px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:70px; top:70px"></div>
|
|
<div class="ring" style="left:0px; top:19px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:15px;"></div>
|
|
<div class="ring" style="left:38px; top:28px"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:10px; top:0px"></div>
|
|
<div class="ring" style="left:58px; top:0px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:90px; top:15px"></div>
|
|
<div class="ring" style="left:38px; top:48px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:45px; top:45px"></div>
|
|
<div class="ring" style="left:29px; top:19px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:45px; top:45px"></div>
|
|
<div class="ring" style="left:58px; top:19px"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="box">
|
|
<div class="diamond" style="left:30px; top:45px"></div>
|
|
<div class="ring" style="left:29px; top:48px"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</body>
|
|
</html> |