时间戳

首页 > 解决方案 > 是否有正确的方法来使用 CSS 样式表中的 base64 数据 URI 图像？

css - 是否有正确的方法来使用 CSS 样式表中的 base64 数据 URI 图像？

问题描述

我正在创建一个包含图像的表，并希望将图像的 src 引用为样式表中的 base64 数据 URI。此样式表将包含编码的多个图像。我可以在页面正文或头部执行此操作，但这会使文档难以编辑。我应该如何编码正文和表格中的图像标签以从外部 CSS 引用？

我尝试将图像用作正文中的 base64 数据 URI。

<img alt="B" src="data:image/png;base64,iVBORw0KG..." align="bottom" border="0" height="186" width="120">

这样可行。也内头作为一种风格。

我查看了 stackoverflow 和其他地方，发现了类似的代码，但没有使用外部 CSS 文件。

<!-- within the page body -->
<td style="vertical-align: top; height: 186px; width: 120px;">
    <div class="parent">
        <div class="child"><img src="C" align="bottom" border="0" height="186" width="120"> </div>
    </div>
</td>

这是一个 JSfiddle https://jsfiddle.net/mL5fkung/

正如您在第一行中看到的那样，图像以传统方式显示。在第二行中，我在 img 代码中使用了 base64 图像代码。第三行显示了不工作的所需代码。

标签： cssbackgroundbase64

解决方案

如果您将类添加C到每个：您的解决方案将起作用<img>：

<img src="" align="bottom" border="0" height="186" width="120" class="C" />

JSfiddle： https ://jsfiddle.net/a40qnzuf/

推荐阅读