Các vấn đề in CSS @media với màu nền;

176

Tôi mới đây tại công ty này và chúng tôi có một sản phẩm có sử dụng dặm của css. Tôi đang cố gắng để tạo ra một kiểu in cho ứng dụng của chúng tôi nhưng tôi đang gặp vấn đề với background-colortrong @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Mọi thứ khác đều hoạt động, tôi có thể sửa đổi các đường viền và như vậy nhưng background-colorsẽ không xuất hiện trong bản in. Bây giờ tôi hiểu rằng bạn có thể không thể trả lời câu hỏi của tôi mà không có thêm chi tiết. Tôi chỉ tò mò nếu có ai có vấn đề này, hoặc một cái gì đó tương tự, trước đây.

css  media-queries 
— Weston Watson
nguồn
Chà, nó vượt qua Trình xác thực CSS của W3C ( j Jigsaw.w3.org/css-validator ). Thật kỳ lạ
— GôTô
Đây không phải là một vấn đề nữa. Tôi gặp vấn đề này bởi vì tôi có một trang bootstrap và bootstrap có một @media printtruy vấn loại bỏ màu nền khỏi các bảng (ví dụ: sọc).
— Martin Thoma
@MartinThoma Bạn đã khắc phục vấn đề như thế nào? Bạn đã loại bỏ CSS khỏi templated temrapated?
— EduLopez

Câu trả lời:

242

NẾU người dùng đã tắt "Màu nền và hình ảnh in" trong cài đặt in của họ, sẽ không có CSS ​​nào ghi đè lên điều đó, vì vậy luôn luôn tính đến điều đó. Đây là một thiết lập mặc định .

Khi đã được đặt xong, nó sẽ in màu nền và hình ảnh, những gì bạn có ở đó sẽ hoạt động.

Nó được tìm thấy ở những điểm khác nhau. Trong IE9beta, nó được tìm thấy trong In-> Tùy chọn trang trong Tùy chọn giấy

Trong FireFox, nó nằm trong Cài đặt trang -> Tab [Định dạng & Tùy chọn] bên dưới Tùy chọn.

— Ryan Ternier
nguồn
10
thật tuyệt, bạn vừa tiết kiệm cho tôi hàng giờ để suy nghĩ về CSS này.
— Weston Watson
162
Với Chrome và Safari, bạn có thể thêm kiểu css "-webkit-print-color-điều chỉnh: chính xác;" đến phần tử để buộc in màu nền và / hoặc hình ảnh
— Marco Bettiolo
11
@MarcoBettiolo dường như không hoạt động trên các bản dựng webkit mới nhất, tuy nhiên, điều quan trọng là
— Hedde van der Heide
2
Thêm! Quan trọng cho các quy tắc giải quyết nó cho tôi cũng.
— Thiago Duarte
14
Để mở rộng dựa trên điều này, tôi đã thêm điều chỉnh màu: chính xác; cho FF hoạt động. Vì vậy, mã đầy đủ của tôi là*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug
252

Để bật in nền trong Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}
— drolex
nguồn
7
Điều này dường như đã giải quyết vấn đề của tôi với việc in một bảng với các màu hàng thay thế.
— Victor J. Garcia
Đảm bảo rằng bạn sử dụng vỏ chính xác cho đường dẫn hình ảnh của mình vì hộp thoại in của Chrome không tải hình ảnh trong lần thử đầu tiên. Điều này chỉ xảy ra trong trường hợp URL thuộc tính hình nền của bạn không khớp với tên của thư mục vật lý. (Báo cáo trong phiên bản 48.0.2564.109 m)
— MPaul
3
sự thay thế trong firefox và IE
— Shan Khan
5
Một lưu ý cho khách du lịch thời gian trong tương lai: bạn có thể muốn sử dụng color-adjustthay thế.
— Toàn cảnh
@ Toàn cầu không được hỗ trợ trong Chrome kể từ tháng 4 năm 2019. Đây là tài liệu firefox.
— Thomas
82

Hiểu rồi:

CSS: 

box-shadow: inset 0 0 0 1000px gold;

Hoạt động cho tất cả các hộp - bao gồm các ô bảng !!!

  • (Nếu tập tin đầu ra của máy in PDF được tin tưởng ..?)
  • Chỉ được thử nghiệm trong Chrome + Firefox trên Ubuntu ...
— T4NK3R
nguồn
5
Bạn có thể thêm hỗ trợ IE8 và IE9 với -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ Nếu bạn muốn hình ảnh sprite của mình hiển thị, hãy sử dụng kỹ thuật img / clip css-tricks.com/css-sprites-with-inline-images , điều đó sẽ cung cấp cho bạn hình ảnh trong IE9 và FF ( không phải IE8)
— emik
2
Hoạt động tuyệt vời trong các trình duyệt thông thường, nhưng không phải trong IE, ngay cả với đề xuất từ ​​@evami.
— woz
@woz Tôi có chức năng này trong một dự án với IE8 / 9. Độ dốc (giống như bóng hộp) thêm một yếu tố nền bổ sung không bị loại bỏ bởi thiết lập lại trình duyệt bắt buộc. bạn có muốn chia sẻ css của bạn?
— emik
2
Điều này dường như không hoạt động với Chrome mới nhất (60).
— swervo
1
Điều này không thành công với tôi trong Chrome. Tôi đang sử dụng 69. Điều đó cho thấy rằng nó đã bị hỏng ít nhất là từ 60 (theo nhận xét của @ swervo).
— iconoclast
34

Hãy thử điều này, nó hoạt động với tôi trên Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— TỐI ĐA
nguồn
22

-webkit-print-color-adjust: exact; một mìnhis Not enough bạn phải sử dụng !importantvới thuộc tính

đây là bản xem trước in trên chrome sau khi tôi thêm !importantvào từng cái background-colorvà colorattrubute trong mỗi thẻ

xem trước in trên chrome

và đây là in xem trước trên chrome trước khi thêm!important

nhập mô tả hình ảnh ở đây

Bây giờ, để biết cách tạo kiểu inject !importantcho div, hãy xem câu trả lời này Tôi không thể đưa ra một kiểu với một quy tắc!

— Basheer AL-MOMani
nguồn
Có thể đó là vì bạn đã có biểu định kiểu @print đặt lại màu nền.
— Niccolo M.
CHÚA ƠI! nó đang hoạt động nhưng làm thế nào nó hoạt động? Bạn có thể giải thích dùm không.
— rahim.nagori
1
Đó là giải pháp duy nhất hiệu quả với tôi cho đến nay. <div style = "- webkit-print-color-điều chỉnh: chính xác! quan trọng; màu nền: đỏ! quan trọng;"> ... </ div>
— Thomas
10

Hai giải pháp hoạt động (ít nhất là trên Chrome hiện đại - chưa được thử nghiệm):

  1. ! quan trọng ngay trong công việc khai báo css thông thường (ngay cả trong bản in @media)
  2. Sử dụng svg
— y1
nguồn
6
! quan trọng giải quyết vấn đề trong mọi trình duyệt hiện đại, miễn là "In màu nền và hình ảnh" được bật.
— Chris Hynes
2
! quan trọng cũng hoạt động mà không cần sự can thiệp của người dùng nếu bạn sử dụng nó cùng với thân {-webkit-print-color-điều chỉnh: chính xác; } (theo nhận xét ở trên)
— yar1
2
Tôi đã thấy rằng nếu tôi sử dụng color-adjusthoặc biến thể webkit thì thực tế tôi không cần quy tắc quan trọng.
— Kasapo
7

Nếu bạn đang muốn tạo các trang "thân thiện với máy in", tôi khuyên bạn nên thêm "! Quan trọng" vào CSS in @media của bạn. Điều này khuyến khích hầu hết các trình duyệt in hình nền, màu sắc, v.v.

VÍ DỤ:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
— hạt n-bia
nguồn
6

Có một mẹo khác bạn có thể làm mà không cần kích hoạt tùy chọn viền in được đề cập trong các bài đăng khác. Vì các đường viền được in, bạn có thể mô phỏng màu nền vững chắc với bản hack này:

.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 */
}

Kích hoạt nó bằng cách thêm lớp vào thành phần của bạn:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Mặc dù điều này cần một số mã bổ sung và một số chăm sóc bổ sung để hiển thị màu nền, nhưng nó vẫn là giải pháp duy nhất được biết đến với tôi.

Lưu ý rằng bản hack này sẽ không hoạt động trên các phần tử khác display: block;hoặc display: table-cell;, ví dụ như vậy <table class="your-background">và <tr class="your-background">sẽ không hoạt động.

Chúng tôi sử dụng điều này để có được màu nền trong tất cả các trình duyệt (vẫn cần có IE9 +).

— hạt nhân
nguồn
1
đó là một vụ hack điên rồ, nhưng ít nhất nó cũng buộc một số dạng màu nền bất kể cài đặt in. rực rỡ, cảm ơn.
— Brad Zacher
6

Đối với chrome, tôi đã sử dụng một cái gì đó như thế này và nó đã làm việc cho tôi.

Trong thẻ cơ thể,

<body style="-webkit-print-color-adjust: exact;"> </body>

Hoặc đối với một yếu tố cụ thể, giả sử nếu bạn có bảng và bạn muốn điền vào một td tức là một ô,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— Aamir Shaikh
nguồn
5

Mặc dù !importantviệc sử dụng thường được tán thành, đây là mã vi phạm trong bootstrap.cssđó ngăn các hàng của bảng được in background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Giả sử bạn đang cố gắng tạo kiểu HTML sau:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Để ghi đè CSS này, hãy đặt quy tắc (cụ thể hơn) sau trong biểu định kiểu của bạn:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Điều này hoạt động vì quy tắc cụ thể hơn mặc định bootstrap.

— Aelfinn
nguồn
Sau nhiều giờ tìm kiếm, tôi tìm thấy câu trả lời này. Tôi đã đi vào và loại bỏ các dòng từ Bootstrap.css và WHAM! Màu sắc trong nền có thể in!
— Mighty Ferengi
1
Cảm ơn bạn! Cuối cùng, đây là câu trả lời giúp tôi đứng dậy và chạy nhưng tôi cần thêm: body {-webkit-print-color-điều chỉnh: chính xác! Quan trọng; }
— Ocean Airdrop
3

Đã tìm thấy sự cố này, vì tôi gặp vấn đề tương tự khi cố gắng tạo tệp PDF từ đầu ra html trong Tập lệnh Google Apps, nơi màu nền cũng không được "in".

Các giải pháp -webkit-print-color-adjust:exact;và !importanttất nhiên không hoạt động, nhưng box-shadow: inset 0 0 0 1000px gold;đã ... hack tuyệt vời, cảm ơn bạn rất nhiều :)

— logol
nguồn
2

Tôi nghĩ rằng tôi sẽ thêm một trợ giúp gần đây và 2015 có liên quan từ trải nghiệm in css gần đây.

Đã có thể in nền và màu bất kể cài đặt hộp thoại in.

Để làm điều này, tôi đã phải sử dụng kết hợp ! Quan trọng & -webkit-print-color-điều chỉnh: chính xác! Quan trọng để có được nền và màu sắc để in đúng.

Ngoài ra, khi khai báo màu sắc, tôi thấy các khu vực cứng đầu nhất cần một định nghĩa trực tiếp đến mục tiêu của bạn. Ví dụ:

<div class="foo">
 <p class="red">Some text</p>
</div>

Và CSS của bạn:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
— Jonathan
nguồn
2

Đã thử nghiệm và làm việc trên Chrome, Firefox, Opera và Edge vào năm 2016/10. Nên hoạt động trên mọi trình duyệt và phải luôn trông như mong đợi.

Ok, tôi đã làm một thử nghiệm nhỏ trên trình duyệt để in màu nền. Chỉ cần sao chép, dán và thưởng thức!

Đây là một trang HTML có thể in đầy đủ cho bootstrap:

<!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>
— Heroselohim
nguồn
1

"Giải pháp" tốt nhất tôi đã tìm thấy là cung cấp nút hoặc liên kết "In" nổi bật, bật lên một hộp thoại nhỏ giải thích một cách táo bạo, ngắn gọn và chính xác rằng họ cần điều chỉnh cài đặt máy in (với hướng dẫn dấu đầu dòng ABC 123) để bật nền và in ảnh. Điều này đã rất thành công đối với tôi.

— alano
nguồn
1

Trong một số trường hợp (các khối không có bất kỳ nội dung nào, nhưng với nền), nó có thể được ghi đè bằng cách sử dụng các đường viền, riêng cho mỗi khối.

Ví dụ:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
— Gedeon
nguồn
0

Bạn có thể sử dụng thẻ canvasvà "vẽ" nền, hoạt động trên IE9, Gecko và Webkit.

— Thomas Lecavelier
nguồn
0

Nếu bạn không phiền khi sử dụng hình ảnh thay vì màu nền (hoặc có thể là hình ảnh với màu nền của bạn), giải pháp bên dưới đã giúp tôi trong FireFox, Chrome và thậm chí IE mà không cần quá nhiều. Đặt hình ảnh ở đâu đó trên trang và ẩn nó cho đến khi người dùng in.

Html trên trang với hình nền

<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;
    }

}

— ksealey
nguồn
Tôi đã sử dụng cách tiếp cận của bạn và cố gắng làm cho nó hoạt động trên IE11, nhưng thật đáng buồn là nó không hoạt động. Đó là cho đến khi tôi đặt một !importantgiá trị cho mỗi thuộc tính trong lớp của mình và sau đó nó sẽ hoạt động.
— Sal Alturaigi
0 
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>

Hoạt động trong Chrome và Edge

— Vasily Ivanov
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.