Question

让我从用例开始。我正在实现一个聊天，其中显示从Gravatar获取的化身。我想要的是，如果没有Gravatar的用户在HTML中显示首字母代替。

我不想寻求对404做出回应的解决方案，所以我想到了这一点：

如果未找到化身，则获取Gravatar，并将其回退到透明的PNG。
在该图片下，以HTML显示缩写。

我无法正常工作。尝试了不同的方法，但是没有运气，例如在相对div的两个div中的同一位置上放置两个绝对div，而透明图像在上面。如果没有图像，这将起作用，但是一旦我放置了透明图像，就不会看到div“在它下面”的内容。有想法吗？

<div class="avatar">

<div class="initials" style="
position: absolute;
text-align: center;
width: 50px;
line-height: 50px;
height: 50px;
font-size: 22px;
background-color: orange;
border: 1px solid #ddd;
border-radius: 4px;
color: #fff;
font-weight: 500;
z-index: 0;">
    AZ
</div>

<div class="gravatar" style="
width: 50px;
position: absolute;">
  <img src="https://www.gravatar.com/avatar/7eca53e11beb0074533d7842ce7dd05b?d=blank">
</div>

在透明图像下显示文字

0 个答案: