我无法弄清楚为什么当定义 id 从 css 获取图像数据时下面的页面不显示图像当我直接在 src img 标签的属性。
img.html
<html>
<head><title>img.css</title>
<link rel="stylesheet" type="text/css" href="img.css">
</head>
<body>
<img id="t"></img>
</body>
</html>
img.css
#t { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z"); }
最佳答案
主要问题是您没有为图像提供宽度和高度。 HTML 元素永远不会调整自己的大小以适应背景图像的大小，因此您必须自己进行调整。
并且源代码中存在标记错误:首先，img 必须具有 src 属性。 img 元素没有结束标签。因此最好使用另一个元素，也许是具有适当样式的 div 或 span。
#t {
width:100px; height:77px;
display:inline-block;
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z"); }<div id="t"></div>(注意100×77是根据背景图本身的尺寸取的，大家可能有不同的要求，根据需要调整。)
但是，您可能会觉得 img 在这里是合适的元素，因为图片是文档的一部分而不仅仅是装饰。在这种情况下，您可以选择将内容放入 src 属性中。这样您就不必手动设置宽度和高度。
<img id="t" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z" alt="→">(当然，如果您在文档中多次需要图像，则此解决方案效率不高。)
关于html - 不能在 img 标签中使用来自 css 的 base64 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33968632/