2

私がやりたいことは単純に思えますが、思ったよりずっと難しいと思います。

デフォルトでは背景画像が印刷されないため（つまり、紙のプリンターを意味します）、ユーザーが選択した背景を印刷できるようにしたいのですが、画像を使用したいと考えています。

だから私は 800 x 400 の div と 1x1 のイメージを持っています。これは完全に 1 色で、赤と言えます。

その画像を繰り返して div を埋めたい。

画像は異なるサイズで、パターンが繰り返される50x50のパターンの画像があります。

したがって、画像を引き延ばしても役に立ちません。

では、背景のように画像を繰り返すにはどうすればよいですか?

背景画像の印刷は使用するブラウザーに依存しますが、背景 (色と画像) が印刷されないと仮定する必要があるため、最初に解決策を試してください。

だから私はどんな種類の背景も使いたくないので、背景ではなく背景のように振る舞わせるために、画像を繰り返したいだけです！

背景を印刷できたとしても、画像を繰り返す方法を知りたいです。

例

http://jsfiddle.net/aAsjv/

左の div の img は、水平方向と垂直方向に繰り返す必要があるため、全体を埋めます

  div #board.
4

5 に答える 5

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

私はちょうどこれを読みました：「あなたがあなたのページを人々に印刷してもらい、デフォルトで画像を含めたくない場合は、背景画像を使用してください。」

したがって、ユーザーに画像も印刷してもらいたい場合は、background-image の代わりに IMG タグを使用する必要があります。

于 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 に答える