css - 内联样式导致文本显示在图像之前？

Question

我在 stackoverflow 上找到了这段代码，它允许我将小图像放在大图像上(在我的例子中是一个小锁，表示电影不可用)

<div style="position:relative;display:inline;">
        <img src="_images/test.jpg" width="350" />
            <div style="position:absolute;bottom:10px;right:10px;">
                <img src="_images/lock.png" width="40">
            </div>
        </div><h3>Air</h3>

这一切都显示完美，但有一瞬间底部的 AIR 标签首先显示(有时是锁定图像)，然后才全部正确卡入到位。 (主图，图片底 Angular 的锁，然后是底部的 h3 标记的 Air。)

有谁知道造成这种情况的原因，以及如何解决它？谢谢

Answer 1

一种替代方法是将 src 内容放在数据 uri 方案中。这将导致图像加载内容。当你将 src 设置为 uri 资源时，浏览器必须出去获取它。这会导致您看到延迟。

http://en.wikipedia.org/wiki/Data_URI_scheme