Question

我正在尝试使用2张图片制作div，但我需要它来保存添加的最后一张图片，我只需要在此处添加一张图片

<html>

<head>

</head>

<body>

<script>    
var x =8;
var y=8;
var obstical = [{'tile':'water','coordinates':'40'},{'tile':'water','coordinates':'41'},{'tile':'water','coordinates':'42'},{'tile':'water','coordinates':'43'},{'tile':'road','coordinates':'64'},{'tile':'road','coordinates':'54'},{'tile':'road','coordinates':'44'},{'tile':'water','coordinates':'45'},{'tile':'road','coordinates':'34'},{'tile':'road','coordinates':'24'},{'tile':'road','coordinates':'04'},{'tile':'road','coordinates':'14'},{'tile':'water','coordinates':'46'},{'tile':'water','coordinates':'47'},{'tile':'water','coordinates':'30'},{'tile':'water','coordinates':'31'},{'tile':'water','coordinates':'32'},{'tile':'water','coordinates':'33'},{'tile':'road','coordinates':'34'},{'tile':'water','coordinates':'35'},{'tile':'water','coordinates':'36'},{'tile':'water','coordinates':'37'},{'tile':'lava','coordinates':'17' },{'tile':'swamp','coordinates':'07' },{'tile':'swamp','coordinates':'06' },{'tile':'swamp','coordinates':'05' },{'tile':'swamp','coordinates':'25' },{'tile':'swamp','coordinates':'15' },{'tile':'lava','coordinates':'16' },{'tile':'lava','coordinates':'26' },{'tile':'lava','coordinates':'21' },{'tile':'lava','coordinates':'00' },{'tile':'lava','coordinates':'01'},{'tile':'lava','coordinates':'10'},{'tile':'lava','coordinates':'11'},{'tile':'desert','coordinates':'02'},{'tile':'desert','coordinates':'03'},{'tile':'desert','coordinates':'12'},{'tile':'desert','coordinates':'13'},{'tile':'desert','coordinates':'22'},{'tile':'desert','coordinates':'23'},{'tile':'mountan','coordinates':'51'},{'tile':'mountan','coordinates':'56'},{'tile':'mountan','coordinates':'52'},{'tile':'forest','coordinates':'67'},{'tile':'forest','coordinates':'66'},{'tile':'forest','coordinates':'65'},{'tile':'forest','coordinates':'63'},{'tile':'forest','coordinates':'62'},{'tile':'forest','coordinates':'61'},{'tile':'forest','coordinates':'60'},{'tile':'ravine','coordinates':'50'},{'tile':'road','coordinates':'74'},{'tile':'hill','coordinates':'20'},{'tile':'hill','coordinates':'27'},{'tile':'ravine','coordinates':'57'}]
var startposishon = [{'coordinates':'71'}]
    var grid = function(row, collom) {


        var sum = '<div class="diamond ">';
        for (var y = 0; y < (row); y++) {
            sum += '<div class="row ">';
            for (var i = 0; i < collom; i++) {

                sum += '<div id = "'+y+''+i+'" class = "square grass"></div>'


            }
            sum+='</div>'
        }
        sum+='</div>'
        document.getElementsByTagName('body')[0].innerHTML = sum;

    }
    grid(x, y);
         var obsticals = function(obstical) {



        for (var i = 0; i <obstical.length ; i++) {
        var f = obstical[i];
         document.getElementById(f.coordinates).classList.add(f.tile); 

        }


    }
    obsticals(obstical);



     function getUrl(y) {
     var img = document.getElementById(y),
     style = img.currentStyle || window.getComputedStyle(img, false),
     bi = style.backgroundImage.slice(5, -2);
     return bi;
  }

  var startposishons = function(startposishon) {



           for (var i = 0; i <startposishon.length ; i++) {
           var f = startposishon[i];
            bi = getUrl(f.coordinates)
            document.getElementById(f.coordinates).style.backgroundImage += "url('char.png'),"+"url("+bi+")"; 
        }


  }
       startposishons(startposishon); 







</script>

</body>

<style>


.grass {
    background-image: url(grass.png);
    background-repeat: no-repeat;
}
.mountan {
    background-image: url(mountan.png);
    background-repeat: no-repeat;
}
.water {
    background-image: url(water.png);
    background-repeat: no-repeat;
}
.lava {
    background-image: url(lava.png);
    background-repeat: no-repeat;
}
.road {
    background-image: url(road.png);
    background-repeat: no-repeat;
}
.desert {
    background-image: url(dessert.png);
    background-repeat: no-repeat;
}
.forest {
    background-image: url(forest.png);
    background-repeat: no-repeat;
        background-size: 150%;
}
.swamp {
    background-image: url(swamp.png);
    background-repeat: no-repeat;
}
.hill {
    background-image: url(hill.png);
    background-repeat: no-repeat;
           background-image: url(hill.png);
    background-repeat: no-repeat;
    background-size: 140%;
    background-position-x: 52%;
    background-position-y: 51%;
}
.ravine {
    background-image: url(ravine.png);
    background-repeat: no-repeat;
}
body {
color: #000000;
    font: 0px georgia, serif;
    line-height: 1.4;
    font-weight: lighter;
    text-rendering: optimizelegibility;
}
.diamond {   
    margin-top: 7%;
    padding-left: 30.5%;

    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    width: 79%;
    height: 79%;
}

.square {
    margin-top: -0.1%;
display: inline-block;
    height: 12%;
    overflow: hidden;
    width: 5.5%;
    border: 1px solid;
}

.row {
    transform: skewY(167deg);
}











</style>

</html>

这就是我得到的

看到我正在编辑的菱形上有点，但是背景却不能同时获得两者。

问题是有很多图片，所以我不得不做很多的假设和组合，我想知道是否有更好的方法可以做到这一点。

Answer 1

您可以使用以下代码在同一div上添加两个图像：

#your-selector { background-image: url(one.png), url(two.png); background-position: center bottom, left top;background-repeat: no-repeat; width: 300px;height: 350px;}

请参见Tutorial

如何在一格上添加2张图像

1 个答案: