我正在尝试使用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>
看到我正在编辑的菱形上有点,但是背景却不能同时获得两者。
问题是有很多图片,所以我不得不做很多的假设和组合,我想知道是否有更好的方法可以做到这一点。
答案 0 :(得分:0)
您可以使用以下代码在同一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