Question

我想仅在未加载图像且显示默认值时才应用以下样式。

#chat-log section .msg img.avatar{
   background: purple;
   color: white;
   text-align: center;
   padding-top: 10px;
}

但是如果我在找到并加载图像时应用它会使图像失真。这是图像

<img src="http://imageipsum.com/1200x675" alt="D" class="avatar">

Answer 1

您可以将其包装在“div”中，如下面的代码所示。这将把紫色放在背景中，如果图片没有加载，它将显示。如果图片加载，那么它将掩盖这个“div”：

CSS示例（使用您自己的类，不是什么）：

    .avatar {
        background: purple;
        color: white;
        text-align: center;
        width: 1200px;
        height: 675px;
    }
    .alt {
        padding-top: 26%;
        text-align: center;
    }

HTML示例：

<div class="avatar">
    <img src="http://imageipsum.com/1200x675">
    <div class="alt">D</div>
</div>

如果已加载图像或是否显示替代图像，如何检查css？

1 个答案: