时间戳

首页 > 解决方案 > 停留在背景之上的化身永远不起作用？

html - 停留在背景之上的化身永远不起作用？

问题描述

对于某些人来说，这可能是一个愚蠢的问题，但我对 HTML 了解不多，所以请多多包涵。我正在尝试设置我的朋友为我为网站所做的 HTML，即用户 HTML。但是，出于某种原因，她为我的头像提供的原始代码不起作用。其他一切都可以，甚至是其他图像，除了头像。 这就是它应该看起来的样子（这是她的预览截图），但相反，我看起来像这样。

<!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ----------------------------------------------> <div class="card border-0 modal-open bg-faded" style="border-radius: 1em;  box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
  <div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px;" 
  class="card-block" ></div>
  
  <div class="row">
     <div class="col-lg-3 pr-lg-0">
        <div class="card card-block d-block bg-faded border-0 rounded-0">
          
          <!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
           <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" 
           class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">

这是她发给我的代码（重点是头像部分，但决定上传整个东西）。在咕哝了几句之后，她尝试将其修复为其他内容（头像部分）以查看图像是否会出现。它确实如此，但不是按照最初的预期方式。所以她认为我的电脑基本上讨厌我。

                <!-- 【 Avatar 】 
    ------------------------------------------------ -->
    <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" class="rounded-circle mx-auto p-2 bg-faded" style="width:200px;margin-top:-75px;">

这是她发送的第二个代码，并且有效。

这个问题在我之前遇到过另一个完全不同的 HTML 用于相同的目的。如果我禁用所见即所得，原始代码确实可以工作，而不是它应该如何工作。它最终与背景分离。

所以这让我大吃一惊。是我的电脑还是 HTML 真的很糟糕？

现在我坐在禁用 WYSIWYG 的情况下，至少有一个可读的头像。对此有任何帮助，如果它是可修复的？对于任何不好的术语、混淆或类似情况，我们深表歉意。在编码方面我是文盲。

EDIT1：我试图在为我正在使用的特定站点制作的代码预览中查看它，它确实按预期显示（见图 1），但是当为实时站点复制粘贴该代码时，它会中断（img 2） . 这让这一切变得更加混乱。

标签： htmlcssavatar

解决方案

像这样的事情的很多问题是，您不仅要担心发送给您的 HTML，还要担心您网站上已经存在的样式会在您放入后影响它。

例如，这是一个简化的版本，它应该与预期的外观/感觉大致匹配。它只使用内联样式。在这个网站上独立查看它，我敢打赌它主要是你想要的。如果你把它粘贴到你的，它可能会起作用。重点是五月。这不是“您的 PC 讨厌您”，而是 html/css 布局可能会变得相当复杂，您需要进行一些研究才能弄清楚应用了什么以及如何正确地将任何片段与您的网站集成。

<div style="display: flex; flex-direction: column; align-items: center;background: #222;">
  <div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px; width: 100%;"></div>
  <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" style="max-height: 200px; margin-top: -100px;border-radius: 200px; border: 10px solid #222;">
</div>

推荐阅读