无法在img标签中使用CSS中的base64图像
[英]cant use base64 image from css in img tag
问题描述
我不知道为什么下面的页面在定义id时不显示图像，而我直接在img标签的src属性中提供数据时从css获取图像数据。
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"); }
1 个解决方案
解决方案1
1 已采纳 2015-11-28 07:52:54
主要问题是您尚未提供图片的宽度和高度。 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="→">
（当然，如果您在文档中多次需要图像，这种解决方案的效率不高。）
将Image JPG转换为GIF并将其打印到BASE64中的标签IMG中
[英]Convert Image JPG to GIF and print it into the tag IMG in BASE64
如何将 URL 传入<img>来自 Webapi 的标签以接受 base64 的图像？
[英]How to pass URL into <img> tag from Webapi to accept image of base64?
某些SVG作为base64无法使用CSS正确显示，但在img标签内的HTML中可以正常工作
[英]Some SVGs as base64 are not displaying correctly using CSS but works fine in HTML within an img tag
如何转换 HTML<img> 标记到 Base64 编码的图像文件中？
[英]How to convert an HTML <img> tag into a Base64 encoded image file?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无法在img标签内使用base64图像？
在图像的 src 标记中使用来自 URL 的 Base64 字符串
将Image JPG转换为GIF并将其打印到BASE64中的标签IMG中
无需保存到html img标签的Python 3图片base64
如何使用Base64编码图像作为img标签的源代码？
如何将 URL 传入<img>来自 Webapi 的标签以接受 base64 的图像？
将 base64 中的图像从 rest 服务返回到 img src 标签
从ajax响应到img标记的base64字符串
某些SVG作为base64无法使用CSS正确显示，但在img标签内的HTML中可以正常工作
如何转换 HTML<img> 标记到 Base64 编码的图像文件中？
相关标签