Question

我想知道是否有一种方法可能是jQuery拍摄图像并将其重复到div的背景中。例如，您在div中有一些旋转图片，例如：

<div id="slides">
   <img src="http://placehold.it/1024x200">
   <img src="http://placehold.it/1024x200">
</div>

因此，当旋转时，那些img文件将重复到其父div（即#slides）的背景中。我知道这似乎是多余的，但是应用快速解决我遇到的问题而不是重新编码整个网站。

谢谢！

Answer 1

使用ONE图像重复背景的最简单方法是使用css。

div#slides{
  image:url('http://placehold.it/1024x200')
  background-repeat:repeat-y
}

但听起来你想要更像幻灯片的东西。有一些jQuery插件可以做到这一点，这可能是你最好的节拍。

基本的原始代码是这样的。我没有测试它，但你应该明白这个想法。

function ghettoSlideShow() {
    $("div#slides", "img").hide(); //Hide all the images
    $("div#slides", "img").each(i) {
      $(this).fadeIn(slow); //Foreach image show it
    }
    ghettoSlideShow(); //Do it again
}

Answer 2

您需要添加一个类或ID标记来表示图像或执行内联css

您需要以某种方式标记图像的第一种方法

然后在你的css background-repeat:repeat;

中

或者第二种方法应用内联存储

<img src="placehold.it/1024x1024" style="background-repeat:repeat;">

如果您正在寻找一个javascript版本，您还需要使用类或ID标记图像以引用它

然后你可以输入

$(".image-class").style("background-repeat","repeat")

也要使它们只能通过弄乱溢出或宽度和高度来适应它们的边界框

使divs背景图像重复其中的源文件

2 个答案: