打印預覽中未顯示背景顏色

Question

我正在嘗試打印頁面。在該頁面中，我給出了一張表格的背景顏色。 當我使用Chrome瀏覽打印預覽其不採取在背景顏色屬性...

所以，我想這個屬性：

-webkit-print-color-adjust: exact; 

，但仍其不顯示顏色。

http://jsfiddle.net/TbrtD/

.vendorListHeading { 
    background-color: #1a4567; 
    color: white; 
    -webkit-print-color-adjust: exact; 
} 


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> 
    <table class="table" style="margin-bottom: 0px;"> 
    <thead> 
     <tr class="vendorListHeading" style=""> 
     <th>Date</th> 
     <th>PO Number</th> 
     <th>Term</th> 
     <th>Tax</th> 
     <th>Quote Number</th> 
     <th>Status</th> 
     <th>Account Mgr</th> 
     <th>Shipping Method</th> 
     <th>Shipping Account</th> 
     <th style="width: 184px;">QA</th> 
     <th id="referenceSO">Reference</th> 
     <th id="referenceSO" style="width: 146px;">End-User Name</th> 
     <th id="referenceSO" style="width: 118px;">End-User's PO</th> 
     <th id="referenceSO" style="width: 148px;">Tracking Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class=""> 
     <td>22</td> 
     <td>20130000</td> 
     <td>Jim B.</td> 
     <td>22</td> 
     <td>510 xxx yyyy</td> 
     <td>zznn@abc.co</td> 
     <td>PDF</td> 
     <td>12/23/2012</td> 
     <td>Approved</td> 
     <td>PDF</td> 
     <td id="referenceSO">12/23/2012</td> 
     <td id="referenceSO">Approved</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 1

的Chrome瀏覽器CSS屬性 「-webkit-打印色彩調整：精確;」適當地工作。

但是，確保你有正確的打印css往往是棘手的。可以做幾件事來避免你遇到的困難。首先，從你的屏幕CSS中分離所有的打印CSS。這是通過@media print和@media屏幕完成的。

通常只需設置一些額外的@media print css是不夠的，因爲在打印時仍然包含所有其他css。在這些情況下，您只需要注意css的特性，因爲打印規則不會自動贏得非打印的css規則。

在你的情況下，-webkit-print-color-adjust：exact正在工作。但是，您的背景顏色和顏色定義正被其他具有更高特異性的CSS所打敗。

雖然我不認可在幾乎任何環境下使用很重要，下面的定義正常工作和揭露問題：

@media print { 
tr.vendorListHeading { 
    background-color: #1a4567 !important; 
    -webkit-print-color-adjust: exact; 
}} 

@media print { 
    .vendorListHeading th { 
    color: white !important; 
}} 

這裏是fiddle（和embedded便於打印預覽的）

Answer 2

這CSS屬性是所有你需要它爲我的作品...當Chrome瀏覽器中預覽，你必須看到它BW和Color（顏色選項：選項 - 彩色或黑白白），所以如果你沒有這樣的選擇，那麼我建議抓住這個Chrome擴展，讓您的生活更輕鬆：

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

的你加入小提琴現場需要這個在您的介質打印的CSS（你有它只是需要把它加入...

介質打印CSS在身：

@media print { 
body {-webkit-print-color-adjust: exact;} 
} 

UPDATE 行，所以你的問題是bootstrap.css ...它有一個媒體打印CSS以及你做... ....你刪除，並應該給你的顏色....你需要做自己的或堅持bootstraps打印CSS。

當我點擊這個我看到彩色打印.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Answer 3

你確定這是一個CSS問題？在這個問題上，谷歌上有一些帖子： http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

它可能與打印過程有關。在safari上，也是webkit，還有一個複選框可以在打印機對話框中打印背景圖像和顏色。

Answer 4

在@media打印樣式表中使用以下內容。

h1 { 
    background-color:#404040; 
    background-image:url("img/404040.png"); 
    background-repeat:repeat; 
    box-shadow: inset 0 0 0 1000px #404040; 
    border:30px solid #404040; 
    height:0; 
    width:100%; 
    color:#FFFFFF !important; 
    margin:0 -20px; 
    line-height:0px; 
} 

這裏有幾個注意事項：

• 背景顏色是絕對的後備，是那裏後人居多。
• background-image使用＃404040製作成PNG的1px x 1px像素。如果用戶啓用了圖像，它可能會工作，如果沒有...
• 設置箱子陰影，如果這不起作用...
• Border = 1/2您希望的高度和/或框的寬度，堅實，顏色。在上面的例子中，我想要一個60px高度的框。
• 取決於您在邊界屬性中控制的內容，將高/寬度清零。
• 字體顏色將默認爲黑色，除非您使用！重要
• 將行高設置爲0可以修改不具有物理尺寸的方框。
• 製作和託管您自己的PNG :-)
• 如果塊中的文本需要包裝，請將其放在div中並使用位置來定位div：relative;並刪除行高。

請參閱我的fiddle以獲得更詳細的說明。

Answer 5

我只需要添加!important屬性到背景顏色標記，以便它展現出來，也沒必要WebKit的部分：

background-color: #f5f5f5 !important;

Answer 6

你的CSS必須是這樣的：

@media print { 
    body { 
     -webkit-print-color-adjust: exact; 
    } 
} 

.vendorListHeading th { 
    background-color: #1a4567 !important; 
    color: white !important; 
} 

Answer 7

如果您使用的引導或任何其他第三方的CSS，請確保您只在其指定媒體屏幕，讓你在打印介質類型的在自己的CSS文件控制：

<link rel="stylesheet" media="screen" href="">

Answer 8

有一個在引導CSS文件風格@media打印下{* ,:後：前....}有顏色和背景樣式標記爲重要的，它刪除任何！任何元素的背景顏色。殺死這兩個CSS，它會工作。

引導程序正在執行的決定，你應該從來沒有打印有任何背景顏色，所以你必須編輯他們的CSS或有另一個！重要的風格，是一個更高的優先。 Good job bootstrap ...

Answer 9

如果您在沒有「打印介質樣式」選項的情況下下載Bootstrap，則不會出現此問題，也不必在bootstrap.css文件中手動刪除「@media print」代碼。

Answer 10

我加倍載入我的外部CSS源文件，並更改我的桌子媒體=「屏幕」媒體=「打印」，所有的邊界被證明

試試這個：

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

<link rel="stylesheet" media="screen" href="bootstrap.css" /> 

Answer 11

我使用purgatory101's answer，但在保留所有顏色（圖標，背景，文本顏色等）時遇到困難，特別是CSS樣式表不能用於動態更改DOM元素顏色的庫。因此，這是一個在打印之前更改元素樣式（background-colour和colour）並在完成打印後清除樣式的腳本。避免在@media print樣式表中編寫大量的CSS是有用的，因爲它適用於任何頁面結構。

有一部分腳本專門用於保持FontAwesome圖標的顏色（或使用:before選擇器插入彩色內容的任何元素）。

JSFiddle showing the script in action

兼容性：作品在Chrome中，我沒有測試其他瀏覽器。

function setColors(selector) { 
    var elements = $(selector); 
    for (var i = 0; i < elements.length; i++) { 
    var eltBackground = $(elements[i]).css('background-color'); 
    var eltColor = $(elements[i]).css('color'); 

    var elementStyle = elements[i].style; 
    if (eltBackground) { 
     elementStyle.oldBackgroundColor = { 
     value: elementStyle.backgroundColor, 
     importance: elementStyle.getPropertyPriority('background-color'), 
     }; 
     elementStyle.setProperty('background-color', eltBackground, 'important'); 
    } 
    if (eltColor) { 
     elementStyle.oldColor = { 
     value: elementStyle.color, 
     importance: elementStyle.getPropertyPriority('color'), 
     }; 
     elementStyle.setProperty('color', eltColor, 'important'); 
    } 
    } 
} 

function resetColors(selector) { 
    var elements = $(selector); 
    for (var i = 0; i < elements.length; i++) { 
    var elementStyle = elements[i].style; 

    if (elementStyle.oldBackgroundColor) { 
     elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance); 
     delete elementStyle.oldBackgroundColor; 
    } else { 
     elementStyle.setProperty('background-color', '', ''); 
    } 
    if (elementStyle.oldColor) { 
     elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance); 
     delete elementStyle.oldColor; 
    } else { 
     elementStyle.setProperty('color', '', ''); 
    } 
    } 
} 

function setIconColors(icons) { 
    var css = ''; 
    $(icons).each(function (k, elt) { 
    var selector = $(elt) 
     .parents() 
     .map(function() { return this.tagName; }) 
     .get() 
     .reverse() 
     .concat([this.nodeName]) 
     .join('>'); 

    var id = $(elt).attr('id'); 
    if (id) { 
     selector += '#' + id; 
    } 

    var classNames = $(elt).attr('class'); 
    if (classNames) { 
     selector += '.' + $.trim(classNames).replace(/\s/gi, '.'); 
    } 

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }'; 
    }); 
    $('head').append('<style id="print-icons-style">' + css + '</style>'); 
} 

function resetIconColors() { 
    $('#print-icons-style').remove(); 
} 

然後修改window.print功能，使其打印前設置的風格和後重置它們。

var window._originalPrint = window.print; 
window.print = function() { 
    setColors('body *'); 
    setIconColors('body .fa'); 
    window._originalPrint(); 
    setTimeout(function() { 
    resetColors('body *'); 
    resetIconColors(); 
    }, 100); 
} 

，用於查找圖標路徑來創建CSS的一部分：元素之前是從this SO answer

副本

Answer 12

打印時，如果背景圖形設置Chrome瀏覽器將無法呈現的背景色，或其他幾種風格，關掉。

這與css，@media或特異性無關。你也許可以繞過它，但最簡單的方法是使用chrome來顯示背景顏色和其他圖形，以便在「更多設置」下正確選中此複選框。

Answer 13

您也可以使用box-shadow屬性。