Question

我想做的事情似乎很简单，但我想它比我想的要难得多。

原因背景图像默认不打印（我的意思是纸上的打印机），我想让用户打印他们选择的背景我想要使用图像。

所以我有一个800 x 400的div和一个1x1的图像完全是1种颜色可以说是红色。

我希望重复该图像以填充div。

图像尺寸不同，我的图像尺寸为50x50，图案重复。

因此拉伸图像不会有帮助。

那么我怎么能重复一个像背景的图像呢？

请先尝试您的解决方案因为打印背景图像取决于您使用的浏览器，但您必须假设背景（颜色和图像）不打印！

所以我不想使用任何背景我只想重复图像，使其像背景一样不作为背景！

即使可以打印背景，我仍然想知道如何重复img。

示例

http://jsfiddle.net/aAsjv/

左边div上的img需要重复地和verticaly重复，所以它填满了整个

  div #board.

Answer 1

您可以在JQuery中使用.clone()复制元素。例如：

HTML：

<div id="wrapper">
    <img class="repeat" src="#" />
</div>

CSS：

img.repeat{ float:left; }
#wrapper{ width: 800px; height: 400px; }

JS：

$(document).ready(function(){
    $('img.repeat').clone().appendTo('#wrapper');// repeat as many times as neccesary
});

使用div的示例： http://jsfiddle.net/hDyam/

Answer 2

只需点击右侧的其他图案，看看会发生什么。

使用jQuery（这不是做这样的事情的最佳方法）然而它正在工作，如果您了解jQuery（我猜你这样做），这是一个简单易懂的简单代码

$(function(){
   repeat_bg();    
    $("#imgs img").click(function(){
        var src = $(this).attr('src');
        $("div#hidden_bg img#dummy").attr("src",src);
        repeat_bg();            
    });
});

function repeat_bg()
{
    var board_width = $('#board').width();
    var board_height = $('#board').height();
    var bg_width = $('#dummy').width();
    var bg_height = $('#dummy').height();


    var count_horizontal = board_width / bg_width;
    count_horizontal= Math.ceil(count_horizontal);

    var count_vertical = board_height / bg_height;
    count_vertical= Math.ceil(count_vertical);
    $('div#background_hack').html("");
    $('div#background_hack').css('width' ,board_width+bg_width);

    /*
    * repeat
    * alert("horizontal we need: "+count_horizontal + " images to fill up");
    * alert("vertical we need: "+count_vertical + " images to fill up");
    * alert("totaal needed images = "+count_horizontal + " * "+ count_vertical + "= "+count_horizontal * count_vertical);
    */

    for (var i=0;i<count_horizontal * count_vertical;i++)
    { 
       var clone = $('#dummy').clone();
        $('div#background_hack').append(clone);
    }    
}

link to jsFiddle

Answer 3

我刚才读到：“如果您打算让人打印您的页面并且您不希望默认情况下包含图片，请使用背景图片。”

因此，如果您希望用户也打印图像，则必须使用IMG标记而不是背景图像。

Answer 4

我可能会创建一些创建这样的东西的javascript（给你一个想法）：

<style>
#bgcontainer
{
  width: 180;
  height: 180;
  overflow: hidden;
}
#innerbgcontainer
{
  width: 2000;
  height: 2000;
}
</style>

<div id="bgcontainer">
  <div id="innerbgcontainer">
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
</div></div>

Answer 5

您必须为div设置ID，并且必须在CSS中使用

background-repeat:repeat;

在这里阅读更多

http://www.w3schools.com/cssref/pr_background-repeat.asp

重复img，就像它是一个背景

5 个答案:

HTML：

CSS：

JS：