在 jQuery 中将图像 SRC 转换为背景图像答案

【问题标题】：Turn image SRC into background-image in jQuery在 jQuery 中将图像 SRC 转换为背景图像
【发布时间】：2011-05-01 08:03:07
【问题描述】：

How to set the image src using jQuery

我正在寻找与这个 jQuery sn-p 做相反的事情。我需要一些会转的代码

<img src="images/filename.jpg">

成为

<div class="imageBox" style="background:url(images/filename.jpg)"></div>

我已经上下搜索，试图找到可以做到这一点的东西，但结果却是空的。我不是 jQuery 大师，所以我将不胜感激有人可以提供的任何帮助。谢谢

【问题讨论】：

之前有一个答案似乎很有用，但后来被删除了。有没有办法取消删除？
我可以看到答案（10k+ rep），你可以相信它被删除是有原因的

标签： jquery

【解决方案1】：

$("img").each(function(i, elem) {
  var img = $(elem);
  var div = $("<div />").css({
    background: "url(" + img.attr("src") + ") no-repeat",
    width: img.width() + "px",
    height: img.height() + "px"
  });
  img.replaceWith(div);
});

Live Demo

【讨论】：

+1 - 虽然你忘记了课程 - <div class='imageBox' /> 而不仅仅是 <div /> 应该可以很好地完成这项工作。
这个函数是做什么的？我只是不明白这段代码是如何输出内联背景图像的
@James 它遍历每个img 标签，创建一个div 并将背景图像设置为img 的src，然后将img 替换为@ 987654330@。想要演示吗？
当然。我一直试图让它在一个大而复杂的模板中工作，所以也许看到它自己工作会有所帮助。
@James Answer 已更新，包括指向带有三个图像的现场演示的链接。它将它们替换为div，并将div 的内部HTML 设置为img 的alt 属性。