1

領域全体に画像を並べて表示できるようにする必要がありますが、そのパターンも印刷する必要があります。

伝統的に、繰り返される背景を使用して画像を並べて表示しますが、その動作を明示的に有効にしない限り、背景はほとんどのブラウザーで印刷されません。

必要なものの例については、この jsFiddleを参照してください(ただし、この例は正しく印刷されません)。

クロスハッチ パターンが印刷される限り、汚いトリックは完全に許容されます。

以下に抜粋された jsFiddle の関連ビット:

<style>
#danger div { background: white; padding:15px; margin:15px;  }
#danger { margin:15px;border: 1px solid black;
    background: url(http://i.stack.imgur.com/pTOTJ.png);
}
</style>
<div id="danger"><div>
    <h3>Danger Will Robinson</h3>
    <p>Don't forget to frob the sporkle.
</div></div>
4

2 に答える 2

1

上記のコメントに基づいて、次のように作成しました。http: //jsfiddle.net/xjD3X/2/絶対位置を使用して画像をテキストの後ろに配置し、htmlにあるため、次のように出力します。

#bg {display:block; position:absolute; top:0; left: 0; z-index: 0;}
#danger div { background: white; padding:15px; margin:15px; position:relative; z-index: 100; }

唯一の問題は、それ自体がタイル化されないことです。ただし、画像がJsfiddleで使用したものと似ている場合は、画像を大きくしても重くなりません。

画像にスパンを使用しましたが、divまたはその他のタグを使用できます。

于 2012-10-21T00:57:21.650 に答える
1

クロスブラウザでこれを行う方法はありません。最適なオプションは、(別のスタイルで) 印刷スタイルシートを作成するか、HTML ファイルに背景を配置することです。Chrome と Safari に css bacgrounds を印刷させ-webkit-print-color-adjust: exact;たい場合は、印刷したい各要素で使用できます。

これを試してみてくださいhttp://jsfiddle.net/xjD3X/1/

于 2012-10-21T00:48:04.650 に答える