如何讓Firefox打印背景色樣式？

Question

我有一些簡單的CSS：

#someElement { 
    background-color:black; 
    color:white; 
} 

它看起來不錯的瀏覽器，但是當我去打印在Firefox它出來爲白色背景上的黑色文本。我想這是某種節省墨水的功能，但是有沒有辦法解決這個問題？

Answer 1

其瀏覽器設置。在你的CSS中沒有什麼可以做的。在Windows中 - File > Page Setup... > Print Background。

Answer 2

也許不是你要找的，但在這裏，這個答案：

我寧願添加一個單獨的樣式表的打印頁面。通常情況下，您希望刪除導航菜單，麪包屑，廣告等內容，並且可能會對屏幕樣式表進行邊距，填充，邊框和字體的小改動。

即使考慮強迫用戶用黑色墨水填充整個頁面並用白色文本看起來很愚蠢。

要添加單獨的打印樣式表，請將另一個樣式表添加到頁面的頭部。

<link rel="stylesheet" href="print.css" type="text/css" media="print"> 

Answer 3

我發現了一個解決方案，雖然有點亂，但是使用CSS僞元素，您可以使用胖邊框創建背景。即使在「打印背景」關閉的情況下，也可以打印邊框，只需使它們變得非常厚！有一點需要注意的是，Firefox會將所有白色字體顏色設置爲黑色，因此當您創建假黑色背景時，Firefox仍會使文本變黑，從而使文本不可見。反正這裏是：

的HTML：

<div class="redBox"> 
    <div class="content">Black on red</div> 
</div> 

的CSS：

.redBox { 
    /* o no, does not work with print */ 
    background-color: red; 
} 

@media print { 
    .redBox { 
    position: relative; 
    overflow: hidden; /* this might not work well in all situations */ 
    } 
    .redBox:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    /* and here it is, the background color */ 
    border: 99999px red solid; 
    z-index: 0; /* was required in my situation */ 
    } 
    .redBox * { 
    /* was required in my situation */ 
    position: relative; 
    z-index: 1; 
    } 
} 

Answer 4

有這個一個簡單的解決方案。

對於background-color，而不是使用：

background-color: red 

用途：

background-color: unset; 
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
            number that is definitely 
            larger than the box dimension*/ 

---

也爲color，而不是：

color: grey; 

用途：

---

你可以限制他們只能通過@media print打印，但你不就得了！

---

注：有時你應該使用 background-color: transparent;或 color: transparent;如果 color或 background-color從父元素繼承。

Answer 5

這就是我通過將下面兩行添加到特定div來使其工作的情況。 「@@ supports（-moz-appearance：meterbar）」有助於添加特定於Firefox的樣式。

-webkit-print-color-adjust：exact;顏色調整：精確;

@@supports (-moz-appearance:meterbar) { 
    .container { 
     margin: 0; 
     font-size: 0.85em; 
     width: 100%; 
     -webkit-print-color-adjust: exact; 
     color-adjust: exact; 
    } 
}