Question

我正在尝试加载图片作为父元素的背景。我已经成功了，但问题是我有几个具有个人背景的html部分。

有没有办法用更少的编码或任何其他方式来做？

我的代码：

  var imgFileData1 = $('.bg-img1').attr('src')
  $('#intro').css({'background-image':'url(' + imgFileData1 + ')'});
  $('#bg-img1').hide();

  var imgFileData2 = $('#bg-img2').attr('src')
  $('#home').css({'background-image':'url(' + imgFileData2 + ')'});
  $('#bg-img2').hide();

我的html看起来像那样：

<section id="intro"><img id="bg-img1" src="intro.jpg"></section>
<section id="home"><img id="bg-img2" src="intro.jpg"></section>

Answer 1

为您的class和<section>代码

分配一些<img>

这使得使用jQuery

更容易选择

e.g。

<强> HTML

<section id="intro" class="load-image">
    <img id="bg-img1" class="background-image" src="intro.jpg">
</section>
<section id="home" class="load-image">
    <img id="bg-img2" class="background-image" src="intro.jpg">
</section>

<强>的Javascript

$(".load-image").each(function() {
  var self = $(this), img = self.find(".background-image");
  self.css("background-image", "url(" + img.attr("src") + ")");
  img.hide();
});

Answer 2

听起来您可能想要创建一个可以使用的通用函数。例如，您可以使用类“标记”img元素...例如：

<img class='moveToParent' ...>

然后搜索所有这些类：

$(".moveToParent")

现在您有一个图像列表，需要将图像移动到父母的背景中。从那里你可以使用类似于：

的逻辑

$(".moveToParent").each(i, element) {
    var imgData = $(this).attr("src");
    // Now apply the image to the parent.
});

加载图像作为背景图像与jquery

2 个答案: