Question

我正在尝试将较小的图像叠加在较大的图像上。我想要做 img src = [重叠图像]

<!-- canvas.html -->
<script>
function renderContent() {
    html2canvas(document.getElementById("content"), {
        allowTaint: true       
    }).then(function(canvas) {
        document.getElementById("result").appendChild(canvas);
    });
  }
</script>

<body onload="renderContent()">
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js">
</script>

<div id="content" style="position: relative; left: 0; top: 0;">
<img style="position: relative; top: 0; left: 0;" src="http://myownradar.alerteagle.com/comp/800x500/north_carolina.gif"> 
<img style="position: absolute; top: 0px; left: 190px;" src="http://radarchive.neocities.org/legend.png"></div>

<br> <div id="result"></div>

Result of code

html2canvas函数不会生成带有URL的图像。
我可以用什么方式在网上瞬间组合图像？

新代码

<style>
.multi_bg_example {
  width: 100%;
  height: 400px;
  background-image: url(http://myownradar.alerteagle.com/comp/800x500/north_carolina.gif), url(http://radarchive.neocities.org/legend.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
</style>

<div class="multi_bg_example"></div>

将div转换为img src

0 个答案: