2016-12-09 8 views
0

イメージをテーブルの裏に(ウォーターマークとして)置いて、それを印刷したいのですが(IEを使用していますが、背景印刷を有効にする)。バックグラウンドclausuleを使用せずにテキスト(またはテーブル)の背後にイメージを置く方法html

私はimgタグを使用して、テーブルの後ろに置くために位置(相対、絶対および固定)で再生しようとしていました。

これは私が開く方法です。ここでページを印刷

function PrintThisDiv(id) { 
    var HTMLContent = document.getElementById(id); 
    var Popup = window.open('about:blank', id); 

    Popup.document.writeln('<html><head><title>Imprime Tiquetes</title>'); 
    Popup.document.writeln('<style type="text/css" media="print">'); 
    //Popup.document.writeln('.no-print{display: none;}'); 
    //Popup.document.writeln('@page{margin: 0;}'); 
    Popup.document.writeln('</style>'); 
    Popup.document.writeln('</head><body style:"position:fixed" onload = "window.print();window.close();">'); 
    Popup.document.writeln("<img src='../Img/reimpreso.PNG' width=100% height=100% alt='Repeating Background Image' style='position:relative' />"); 

    //Popup.document.writeln('<a href="javascript:;" onclick="window.print();">Imprimir</a>'); 
    Popup.document.writeln(HTMLContent.innerHTML); 
    Popup.document.writeln('</body ></html>'); 
    Popup.document.close(); 
    Popup.focus(); 
} 

テーブル

<table width='200px' cellspacing='0' cellpadding='0' style=\"border: thin solid #000000; font-family: 'Times New Roman'; font-size: 8.25px\"> 

答えて

1

は非常に基本的なサンプルです:あなたが持っている

https://plnkr.co/edit/5RKsxTL60x7dWwRrb03l?p=preview

<div style="position:relative;"> 
    <img style="width:200px;height:200px;" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwJCBoDRV/pcAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABkklEQVRo3u1aQRKDMAgsTI4+xP+/xod4p6fOdNqoARZInXpsY8jCAhsTEpHHHR5+3OS5DZB29ifttKENyiJrBBA6ypEIEJHAyqlFO20Ip7VZON4Do4kWZ3PZC06dI55Je07w0ufKsUNAvCCQxeRo/ksgIwY9NLQA6tlrlSB671sjZe4jEcXAQ2GubIYem5/j+RdB9JopZxuPyEPaafvKEe0CrbliAXD2DlfQCN1DhoGgKhSisR79zt6JRxaniYIsslocx9GejpA3vXGM4qiX+176ckQya9RByA4Rpa1GooOWOGylwmwfIDh7MVE7T/YY1i4qsh+5k12zOIQ+O5oDUrWywEyltaw952p8eGdHABoZ0zIXfjafR8vJImuLBiGLrBbg2obKkbx+GRuRIlppo6YW6ruTJzrQ/QiqFGsio6Li+54d6f3MSH9FJFNyoG2li8YoW2UnVpo9vEn9ao4FPB0d7ZiG9iyyKqnEaPWpLqwKok+sqooHae+izHqJgCuMhmx/UbeDMlVBKJDq53/NabbnCakwWb7DRriDAAAAAElFTkSuQmCC'> 
    <table style="width:300px;height:200px;position:absolute;top:0;left:0;" border=1><tr><td>item1</td><td>item2</td></tr></table> 
</div> 

テーブルとイメージの両方をdivの同じレベルに配置します。子要素を絶対位置に置くことができるようにdivを相対位置に設定します。

関連する問題