css - 从另一个文件引用 base64 字符串

Question

在我的 html 页面中，我在图像标签内使用了 base64 编码图像:

<img src="data:image/jpeg;base64,/9j/4AA" />

实际的 base64 代码要长得多，我在相当多的 html 文件中使用它。有什么方法可以将上面的内容放在 css 文件或其他文件中，这样我就可以按名称引用它了吗？

Answer 1

如果你必须使用 base64 字符串而不是二进制，你可以为 css 做类似的事情:

.picture {
   background:
     url(data:image/jpeg;base64,/9j/4AA...)
     no-repeat
     left center;
   width: 250px;
   height: 100px;
   display: inline-block;
}

然后将图片类应用于 html 中的 div:

<div class="picture"></div>

参见:https://css-tricks.com/data-uris/

更新:这是将图像插入表格的片段:

.picture {
   background:
     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdUlEQVQ4ja1TQQ7AIAjjER7EZ+qb5DX7Ezu4RYaaTNCkF2KlRQqgD4cEjBkYKzBeD2qrhTTc/5JjEaQV8oKM9IPcFRk6K8QiPW+SX4Rk7C5V7HmfzMJObjjxgMcCnRii9xvdi2RbZXKESXeexjkWpYhabYzzDXHli0yOvPvwAAAAAElFTkSuQmCC)
     no-repeat
     center;
   display: inline-block;
   width: 16px;
   height: 16px;
}

<table>
  <tr>
    <td>
      <div class="picture"></div>
    </td>
    <td>Another Cell</td>
  </tr>
</table>