如何获取元素上的所有图像

-1

div.image-block中的img用于背景。如何获取元素上的所有图像

用户将放置在.block3图像通过拖放

如何创建将包含来自.image-block所有元素的元素？

<style> 
    .image-block { 
     position: relative; 
     z-index: 1; 
     width: 1490px; 
     height: 400px; 
    } 
    .block3 { 
     position: absolute; 
     z-index: 2; 
     top: 100px; 
     left: 100px; 
     width: 200px; 
     height: 200px; 
     display: block; 
    } 
</style> 
<div class="image-block"> 
    <img src="https://hsto.org/getpro/habr/post_images/dde/292/490/dde292490b55a8c0824ecc6cc038f999.png" alt="картинка" width="1490" height="400"> 
    <div class="block block3"></div>  
</div>

来源

2017-07-20 Alexxosipov

目前尚不清楚你的要求。请花点时间阅读：https://stackoverflow.com/help/mcve –

不确定你的意思是“将包含来自.image-block的所有元素”，但你可以使用css将图像设置为div：'background：url（'https：// whatever'）' – Kai

有没有简单的方法来做到这一点。虽然你可能想看看这个帮助吗？ https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript –

你在想这样的事吗？

function getRandomColor() { 
 
    var letters = 'ABCDEF'; 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
    color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
} 
 

 
function AddImages() { 
 

 
    for (var i = 0; i < 20; i++) { 
 

 
    var randomColor = getRandomColor(); 
 

 
    var content = "<div class='dummyImage' style='background:" + randomColor + "'></div>"; 
 

 
    $("#chooseImages").append(content); 
 
    $(".dummyImage").draggable({ 
 
     snap: ".block3, .dummyImage", 
 
     stop: function() { 
 

 
     $("#copyFromImageBlock").empty(); 
 

 
     $("#chooseImages .dummyImage").each(function() { 
 
      if (
 
      $(this).css("left") != "0px" && 
 
      $(this).css("right") != "0px" && 
 
      $(this).css("bottom") != "0px" && 
 
      $(this).css("top") != "0px" 
 
     ) { 
 
      $($(this)).clone().appendTo("#copyFromImageBlock").css({ 
 
       "left": "0", 
 
       "right": "0", 
 
       "top":"0", 
 
       "bottom":"0"    
 
      }); 
 
      } 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
AddImages();

.image-block { 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 400px; 
 
    height: 400px; 
 
    background: #CCCCCC; 
 
    outline: solid 1px black; 
 
} 
 

 
.block3 { 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
    background: #AAAAAA; 
 
} 
 

 
#chooseImages { 
 
    width: 400px; 
 
    position: relative; 
 
    outline: 1px solid black; 
 
} 
 

 
#copyFromImageBlock { 
 
    width: 50px; 
 
    height: 400px; 
 
    position: absolute; 
 
    right: -50px; 
 
    top: 0px; 
 
    overflow: hidden; 
 
    outline: 1px solid black; 
 
    background: #444; 
 
} 
 

 
.dummyImage { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    z-index: 500; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 

 
The img tag within div.image-block is used for background. User will put images on .block3 by drag and drop. How to create an element that will contain all elements from .image-block? 
 

 
<div class="image-block"> 
 
    <div class="block3"></div> 
 
    <div id="copyFromImageBlock"></div> 
 
</div> 
 

 
<div id="chooseImages"></div>

来源

2017-07-20 02:09:47 Icewine

如何获取元素上的所有图像

回答

相关问题