Web网页坦克大战里面坦克有四种朝向，普通情况会是四张图片，其实只是显示一张图片的不同区域，就像下图：

原理是把这张图作为一个div的背景图片，并限制div区域宽高以及显示图片的区域坐标

上图中白色框内是网页中的本身的div

对于图片显示区域的坐标原点是div的左上角坐标，background-position-X或者Y都是根据如图坐标计算来移动原点的位置

就算坐标值为负也可，因为默认div的背景图周边也一层一层在div外的拼接着，只不过限制了div的宽高没有显示。

下例中图片为440x330，所以div取图片四分之一220x165，而且X=-110px & Y=-82px 与 X=330px & Y=248px 显示的是图片同样的中间部分

<html>
<head>
    <title>改变图片显示区域</title>
    <script>
        function change(obj){
            var ob = document.getElementById("td");
            if(obj.value == "左上"){
                ob.style.backgroundPositionY = 0 + "px";
                ob.style.backgroundPositionX = 0 + "px";
            }
            else if(obj.value == "左下"){
                ob.style.backgroundPositionY = 165 + "px";
                ob.style.backgroundPositionX = 0 + "px";
            }
            else if(obj.value == "居中"){
                ob.style.backgroundPositionY = 248 + "px";
                ob.style.backgroundPositionX = 330 + "px";
            }
            else if(obj.value == "右上"){
                ob.style.backgroundPositionY = 0 + "px";
                ob.style.backgroundPositionX = 220 + "px";
            }
            else if(obj.value == "右下"){
                //就算坐标为负，只要计算准确也能显示出预期区域
                ob.style.backgroundPositionY = -165 + "px";
                ob.style.backgroundPositionX = -220 + "px";
            }
        }
    </script>
</head>
<body>
    <div id="td" style="background-image: url('Work.jpg'); width: 220px; height: 165px; 
        background-position-Y: -82px; background-position-X: -110px">
    </div><br>
    <input type="button" value="左上" onclick="change(this)">
    <input type="button" value="左下" onclick="change(this)">
    <input type="button" value="居中" onclick="change(this)">
    <input type="button" value="右上" onclick="change(this)">
    <input type="button" value="右下" onclick="change(this)">
</body>
</html>