有没有办法直接在css后台使用图像数据？

Question

我已经看到了如何将图像数据嵌入到img标签中（感谢下面的回答）但是我很难将图像数据嵌入到css {{1在background标记中。

如果我使用相同的图像数据并将其放在div属性中，则它不再有效。

background-url

这是我的测试html和css，https://jsfiddle.net/70vc1oLd/。

在Mac上的Firefox中，我看不到任何图像。

Answer 1

尽管不推荐，但仍有可能。你可以在这里阅读how to embed data uri in css。

<强> CSS

#myDiv {
  background: url(data:image/gif;base64,IMAGE-DATA-GOES-HERE) no-repeat;
}

话虽如此，你应该考虑到职业选手和职业选手。将图像嵌入到CSS中的缺点：

<强>赞成

• 减少对服务器的请求。
• 使用CSS代码缓存图像。

<强> CONS

• css文件变得更大，加载时间更长。
• 维护起来比较困难，因为在你的css文件中你甚至看不到图像的名称，所以你需要“记住”每个css属性中嵌入了哪个图像......
• 页面加载需要更长时间，因为浏览器等待完成加载CSS-现在比没有图像需要更长的时间。
• 图片＆amp; CSS文件请求无法并行加载，因为它们位于单个请求中

如果您的图片数量较少，也许是您网站的基本图标，那就可以了。如果你想用它来获得高质量的图像，它只会使你的页面加载waaaaaayyyyy tooooo sloooowwwww ...

Answer 2

尝试使用此

＆＃13;

＆＃13;

#myDiv {
  background: url(image-data) no repeat 
}

＆＃13;

<div class="myDiv">
  <!-- enter content here -->  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题在于换行！

我认为换行符是编码的一部分！

这是original CSS（看看线条如何均匀分布 - 它看起来是正确的，对吧？）：

#myDiv {
  width:400px;
  height:200px;
  outline:1px dotted blue;
  background: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==")
repeat-x left center;
}

以下是updated CSS：

#myDiv {
  width:400px;
  height:200px;
  outline:1px dotted blue;
  background: 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==)
repeat-x left center;
}

这里正确渲染