2

我想做的事情看起来很简单，但我想它比我想的要难得多。

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

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

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

图像尺寸不同，我的图像具有 50x50 的图案和重复图案。

所以拉伸图像无济于事。

那么我怎样才能像背景一样重复图像呢？

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

所以我不想使用任何类型的背景，我只想重复图像，让它像背景一样而不是背景！

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

例子

http://jsfiddle.net/aAsjv/

左边div的img需要横向纵向重复，所以填满了整个

  div #board.
4

5 回答 5

1

只需单击右侧的另一个模式，看看会发生什么。

用 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);
    }    
}

链接到 jsFiddle

于 2013-04-10T12:42:01.367 回答
1

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

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/

于 2013-04-10T11:31:36.750 回答
0

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

因此，如果您希望用户也打印图像，则必须使用 IMG 标签而不是 background-image。

于 2013-04-10T09:00:51.520 回答
0

我可能会创建一些 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>
于 2013-04-10T09:31:13.277 回答
-3

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

background-repeat:repeat;

在这里阅读更多

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

于 2013-04-10T08:54:58.360 回答