gpt4 book ai didi

html - 不能在 img 标签中使用来自 css 的 base64 图像

转载 作者:行者123 更新时间:2023-11-28 16:39:14 25 4
gpt4 key购买 nike

我无法弄清楚为什么当定义 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 元素没有结束标签。因此最好使用另一个元素,也许是具有适当样式的 divspan

#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="&rarr;">

(当然,如果您在文档中多次需要图像,则此解决方案效率不高。)

关于html - 不能在 img 标签中使用来自 css 的 base64 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33968632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com