div内容相互覆盖答案

【问题标题】：div contents overwrite each otherdiv内容相互覆盖
【发布时间】：2018-07-02 15:49:26
【问题描述】：

我有一个 div，我在其中应用了文本和图像。它看起来很好，直到我使用 html2canvs 库将它转换为图像。当这个 div 转换为图像时，文本变得更小，并且 div 内的其他图像覆盖它。我希望 div 图像看起来像捕获该 div 之前的样子。

function ConvertToImage(btnExport) {
  html2canvas($("#myDIV")[0]).then(function(canvas) {
    var base64 = canvas.toDataURL();
    $("[id*=hfImageData]").val(base64);
    __doPostBack(btnExport.name, "");
  });
  return false;
}

#myDIV {
  width: 550px;
  height: 650px;
  background-image: url(myimg.png);
  color: orange;
  float: right;
  margin-top: 150px;
  background-repeat: no-repeat;
  border: 2px solid midnightblue;
  margin-right: 150px;
  font-size: x-large;
}
#logo {
  width: 85px;
  height: 150px;
  background-image: url('logo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.1);
}
#logo2 {
  width: 85px;
  height: 150px;
  background-image: url('logo2.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.text_decoration {
  width: 200px;
  height: 60px;
  background: transparent;
  border: none;
}

<div id="myDIV">
  <div style="height:510px;width:290px;margin:50px 100px">
    <input maxlength="15" type="text" id="myText" class="text_decoration resize-drag" autocomplete="off" />
    <div id="logo" class="resize-drag"></div>
    <div id="logo2" class="resize-drag"></div>
    <img id="images" src="#" class="resize-drag" style="display:none" />
  </div>
</div>

<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false" 
 OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" CssClass="btnstyle" Height="50px" Width="200px" />

       protected void ExportToImage(object sender, EventArgs e)
    {
        string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
        byte[] bytes = Convert.FromBase64String(base64);
        MemoryStream msImage = new MemoryStream(bytes,0,bytes.Length);
        msImage.Write(bytes, 0, bytes.Length);
        System.Drawing.Image imageTosave = 
        System.Drawing.Image.FromStream(msImage, true);
        string fileName = Guid.NewGuid() + ".png";
        string filePath = 
        Path.Combine(Server.MapPath("~/CanvasImages/"+fileName));         
        imageTosave.Save(filePath, ImageFormat.Png);
        string dbPath = "~/CanvasImages/" +fileName;
       }

【问题讨论】：

欢迎来到 StackOverflow - 请通过代码向我们展示您所做的工作、您的预期结果以及您遇到的问题！我们很乐意提供其他帮助！
请提供带有代码的minimal reproducible example，以便我们实际看到您在做什么。
我更新了我的问题，请查看它。感谢您宝贵的时间。
什么按钮？似乎是这里问题的核心。你如何调用你的函数？ “出现一个文本框” - 你的意思是显示？如果是这样怎么办？请为您的问题添加更多代码、标记和详细信息，使示例实际产生您观察到的无效行为。您的代码中有html2canvas，请在您的示例中添加对它的实际引用。完整而简洁。
您的 CSS 在元素上的宽度为 85、85 和 200，但它们在内部，元素只有 290，边距顶部 50，右侧为 100 像素。你的数字似乎没有加起来。将样式放入标记和 css 几乎总是一团糟，只使用 CSS。

标签： javascript c# jquery css

【解决方案1】：

我不是专家，但是当我遇到这个问题时，我发现最常见的问题是

display: block;

或填充和边距

【讨论】：