私はこの会社で新しいです、そして、我々は何マイルものcssを使う製品を持っています。アプリ用に印刷可能なスタイルシートを作成しようとしていますが、で問題が発生しbackground-colorてい@media printます。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
他のすべては機能します。境界線などを変更できますがbackground-color、印刷には反映されません。これで、詳細がないと私の質問に答えられない可能性があることを理解しました。以前に誰かがこの問題、または同様の問題を抱えていたかどうか、私はただ興味がありました。
Chromeでバックグラウンド印刷を有効にするには：
body {
-webkit-print-color-adjust: exact !important;
}
ユーザーが印刷設定で[背景色と画像の印刷]をオフにしている場合、CSSはそれを上書きしないため、常にそれを考慮してください。これはデフォルト設定です。
背景色と画像を印刷するように設定すると、そこにあるものが機能します。
それはさまざまな場所で見つかります。IE9betaでは、[印刷]->[ページオプション]の[用紙オプション]にあります。
FireFoxでは、[ページ設定]->[フォーマットとオプション]タブの[オプション]にあります。
とった：
CSS：
box-shadow: inset 0 0 0 1000px gold;
テーブルセルを含むすべてのボックスで機能します!!!
これを試してみてください、それはグーグルクロームで私のために働きました：
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; 単独でis Not enough
あなたは!important属性で使用する必要があります
これは、それぞれに追加し、各タグに属性を付けた後、 Chromeでプレビューを印刷しています!importantbackground-colorcolor
これは、追加する前にChromeでプレビューを印刷しています!important
さて、divのスタイルを知る方法を知るためinject !importantに、この答えをチェックしてください。「！important」ルールでスタイルを注入することはできません。
動作する2つのソリューション（少なくとも最新のChromeでは-それ以上のテストは行われていません）：
「プリンターフレンドリー」なページを作成したい場合は、@ media print CSSに「！important」を追加することをお勧めします。これにより、ほとんどのブラウザが背景画像や色などを印刷するようになります。
例：
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
他の投稿で言及されている境界線の印刷オプションをアクティブにせずに実行できる別のトリックがあります。境界線が印刷されているので、このハックで無地の背景色をシミュレートできます。
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
要素にクラスを追加してアクティブにします。
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
これには、背景色を表示するための追加のコードと特別な注意が必要ですが、それでも私が知っている唯一の解決策です。
display: block;このハックは、または以外の要素では機能しないことに注意してください。display: table-cell;たとえば<table class="your-background">、とは機能し<tr class="your-background">ません。
これを使用して、すべてのブラウザーで背景色を取得します（それでも、IE9 +が必要です）。
クロムについては、私はこのようなものを使用しました、そしてそれは私のためにうまくいきました。
ボディタグ内で、
<body style="-webkit-print-color-adjust: exact;"> </body>
または、特定の要素について、テーブルがあり、td、つまりセルを埋めたい場合を考えてみましょう。
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
使用法は一般的に眉をひそめていますが、これはテーブルの行がで印刷されないよう!importantにする問題のあるコードです。bootstrap.cssbackground-color
.table td,
.table th {
background-color: #fff !important;
}
次のHTMLのスタイルを設定しようとしていると仮定します。
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
このCSSをオーバーライドするには、スタイルシートに次の（より具体的な）ルールを配置します。
@media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
これは、ルールがブートストラップのデフォルトよりも具体的であるために機能します。
この問題が見つかったのは、背景色も「印刷」されていないGoogleAppsScriptのhtml出力からPDFを生成しようとしたときに同様の問題が発生したためです。
-webkit-print-color-adjust:exact;と!importantソリューションはもちろん機能しませんでしたが、機能しましbox-shadow: inset 0 0 0 1000px gold;た...素晴らしいハック、ありがとうございました:)
このスニペットを印刷メディアクエリに追加したところ、すべてのスタイルが意図したとおりに適用されました。
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
最近の印刷CSSの経験から、最近および2015年の関連する援助を追加すると思いました。
印刷ダイアログボックスの設定に関係なく、背景と色を印刷できました。
これを行うには、！importantと-webkit-print-color-adjust：exact！importantを組み合わせて使用し、背景と色を正しく印刷する必要がありました。
また、色を宣言するときに、最も頑固な領域をターゲットに直接定義する必要があることがわかりました。例えば：
<div class="foo">
<p class="red">Some text</p>
</div>
そしてあなたのCSS：
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
2016/10までに、 Chrome、Firefox、Opera、Edgeでテストおよび動作します。どのブラウザでも動作し、常に期待どおりに表示される必要があります。
わかりました。背景色を印刷するために、ブラウザ間で少し実験を行いました。コピーして貼り付けて楽しんでください！
これは、ブートストラップ用の完全に印刷可能なHTMLページです。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
私が見つけた最良の「解決策」は、目立つ「印刷」ボタンまたはリンクを提供することです。このボタンは、背景を有効にするためにプリンター設定を調整する必要があることを大胆に、簡潔に、簡潔に説明する小さなダイアログボックスをポップアップします。および画像印刷。これは私にとって非常に成功しています。
場合によっては（コンテンツがないが背景があるブロック）、ブロックごとに個別に境界線を使用してオーバーライドできます。
例えば：
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
また、[有効にする]>[CSSメディアをエミュレートする]>[Inspact]>[その他のツール]>[レンダリング]を選択します。非常に詳細な手順はここにあります。
タグを使用しcanvasて背景を「描画」できます。これはIE9、Gecko、およびWebkitで機能します。
背景色の代わりに画像（または背景色の画像）を使用してもかまわない場合は、FireFox、Chrome、さらにはIEでも、オーバーライドなしで以下の解決策が機能します。ページのどこかに画像を設定し、ユーザーが印刷するまで非表示にします。
背景画像のあるページのhtml
<img src="someImage.png" class="background-print-img">
Css
.background-print-img{
display: none;
}
@media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
印刷スタイルシートの内側を設定しないでください。background-color通常のcssファイルに属性を設定するだけで問題なく動作します:)
この例を確認してください：ヘッダーとフッターを備えた究極の印刷HTMLテンプレート
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
ChromeとEdgeで動作します
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
} <div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>Chrome、Firefox、Edgeでテストされ、動作します...