HTMLの60度回転ウォーターマークを印刷する方法CSS

Question

私はA4サイズのHTMLページを持っています。私はそれをA4サイズにするためにCSSを使用します。今私は60度でそのページにウォーターマークを印刷したい。しかし、私は解決策を見つけることができませんでした。私はGoogleで多くの時間を検索するが、失敗した。誰でも私を助けてくれますか？ここで

は、そのページのCSS

<style> 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #F0F0F0; 
    font: 12pt "Times New Roman"; 
    } 
    * { 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    } 
    .page { 
     width: 210mm; 
     min-height: 297mm; 
     padding: 08mm; 
     margin: 2mm auto; 
     border: 1px #D3D3D3 solid; 
     border-radius: 5px; 
     background: white; 
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 

    } 
    .subpage { 
     padding: 1cm; 
     border: 5px solid; 
     height: 257mm; 
     outline: 2cm #FFEAEA solid; 
    } 

    @page { 
     size: A4; 
     margin: 0 0em 0em 0em; 
    } 
    @media print { 
     html, body { 
      width: 210mm; 
      height: 297mm; 
      -webkit-print-color-adjust: exact  
     } 
     .page { 
      margin: 0; 
      border: initial; 
      border-radius: initial; 
      width: initial; 
      min-height: initial; 
      box-shadow: initial; 
      background: initial; 
      page-break-after: always; 
     } 
     </style> 

Answer 1

が固定不透明度や位置を使用しています。

.for-watermark-div 
{ 
position: fixed; 
bottom: 257px; 
right: 100px; 
opacity: 0.5; 
z-index: 99; 
color: hotpink; 
/* Rotate div */ 
-ms-transform: rotate(60deg); /* IE 9 */ 
-webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */ 
transform: rotate(60deg); 
}