| <!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> |
