Watermark CSS可在Firefox中使用，但不能在Chrome或IE中使用

Question

我創建了css，可以在打印模式下在頁面上放置水印文本。

以下是水印文本的HTML部分。

<p id="bg-text">Unregistered copy after date <span id="date"></span></p>

以下是水印文本的css部分。

/* WaterMark */
#bg-text {position:absolute; display:inline; top:300px; color: lightgrey;
  font-size:100px; transform:rotate(300deg); opacity:0; width:980px;}

@media print 
{
  #bg-text {position:fixed; top:430px; display:inline; color: lightgrey;
    font-size:100px; transform:rotate(300deg); opacity:0.3; width:980px;}
}

我需要的是，當用戶打印頁面時，所有頁面都應顯示水印文本。
該解決方案在Firefox中工作正常，但在Chrome和IE中，水印文本僅出現在首頁上。 其余頁面沒有水印。

我應該怎么做才能在IE和Chrome瀏覽器中正常工作？

Answer 1

您需要確保將轉換應用於所有瀏覽器。

 -webkit- transform:rotate(300deg);
 -ms-transform:rotate(300deg);
 -moz-transform:rotate(300deg);
 transform:rotate(300deg);

將它們添加到兩種CSS樣式中，它應該可以工作