Câu hỏi Làm cách nào để buộc trình duyệt in hình nền trong CSS?


Câu hỏi này đã được hỏi trước nhưng giải pháp không áp dụng trong trường hợp của tôi. Tôi muốn đảm bảo một số hình nền được in vì chúng không thể tách rời với trang. (Chúng không phải là hình ảnh trực tiếp trong trang vì có một số trong số chúng được sử dụng làm CSS sprites.)

Một giải pháp khác cho cùng câu hỏi đó cho thấy việc sử dụng list-style-image, mà chỉ hoạt động nếu bạn có một hình ảnh khác nhau cho mỗi biểu tượng, không có CSS ​​sprites có thể.

Ngoài việc tạo một trang riêng biệt với các biểu tượng nội tuyến, còn có giải pháp nào khác không?


75
2017-07-12 19:48


gốc




Các câu trả lời:


Bạn có rất ít quyền kiểm soát các phương thức in của trình duyệt. Hầu hết bạn có thể SUGGEST, nhưng nếu cài đặt in của trình duyệt có "không in hình nền", bạn không thể làm gì mà không cần viết lại trang của mình để biến hình nền thành hình ảnh "tiền cảnh" nổi xuất hiện phía sau nội dung khác.


43
2017-07-12 19:51



stackoverflow.com/a/44908040/4367683 - Machado


Với Chrome và Safari, bạn có thể thêm kiểu CSS -webkit-print-color-adjust: exact; để phần tử ép buộc in màu nền và / hoặc hình ảnh


167
2018-01-16 11:12



Điều này thật tuyệt. Làm cho cuộc sống dễ dàng hơn nhiều đối với người dùng ảo / webkit - Jason
những gì về firefox? - John Demetriou
không làm việc trong nghĩa là gì? - Muneem Habib
@ MuneemHabib Nó không hoạt động trong IE, trên thực tế, trình duyệt được hỗ trợ duy nhất là Chrome: developer.mozilla.org/en-US/docs/Web/CSS/… - Marco Bettiolo
@DisgruntledGoat nên cập nhật điều này là câu trả lời đúng vì nó nhanh chóng giải quyết được vấn đề của tôi (dự án của tôi tại nơi làm việc chỉ tập trung vào Chrome). Nó rõ ràng không hoạt động cho tất cả các trình duyệt nhưng nó nên được biết, lên phía trước, bất kể. - Brett84c


Tôi tìm thấy một cách để in hình nền với CSS. Đó là một chút phụ thuộc vào cách nền của bạn được đặt ra, nhưng nó có vẻ làm việc cho ứng dụng của tôi.

Về cơ bản, bạn thêm @media print đến cuối bảng định kiểu của bạn và thay đổi nền cơ thể một chút.

Ví dụ, nếu CSS hiện tại của bạn trông như thế này:

body {
background:url(images/mybg.png) no-repeat;
}

Ở cuối biểu định kiểu, bạn thêm:

@media print {
body {
   content:url(images/mybg.png);
  }
}

Điều này cho biết thêm hình ảnh cho cơ thể như là một hình ảnh "tiền cảnh", do đó làm cho nó có thể in được. Bạn có thể cần phải thêm một số CSS bổ sung để làm cho z-index đúng. Nhưng một lần nữa, nó lên đến cách trang của bạn được đặt ra.

Điều này làm việc cho tôi khi tôi không thể có được một hình ảnh tiêu đề để hiển thị trong chế độ xem in.


64
2017-09-26 23:25



Đây là một giải pháp tuyệt vời cho những gì tôi cần làm, đó là chuyển đổi nội tuyến <img> (cho RWD) với một cái khác cho @media print. Hình ảnh web trên nền tối, vì vậy in hình ảnh đó không hoạt động trên giấy trắng và tôi không muốn ép người dùng in nền tối trên tiêu đề. Hoàn hảo! - JHogue
@ JHogue - Cảm ơn! Vui mừng nó đã giúp bạn. - ckpepper02
Mặc dù đây không phải là câu trả lời "đúng". FAR hữu ích hơn câu trả lời được chấp nhận. - Xenology
bên dưới câu trả lời stackoverflow.com/a/15208258/915865 nên được đánh dấu vì nó có lời giải thích tốt hơn, imho - Kat Lim Ruiz
Không hoạt động trong firefox mặc dù nó xuất hiện - Vall3y


Trình duyệt, theo mặc định, có tùy chọn in màu nền và hình ảnh bị tắt. Bạn có thể thêm một số dòng trong CSS để bỏ qua điều này. Chỉ cần thêm:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

27
2017-07-04 14:03



ya hoạt động tốt nhưng mozilla đánh dấu là không standart Tính năng này không chuẩn và không theo dõi tiêu chuẩn. Không sử dụng nó trên các trang web sản xuất phải đối mặt với Web: nó sẽ không hoạt động cho mọi người dùng. Cũng có thể có sự không tương thích lớn giữa việc triển khai và hành vi có thể thay đổi trong tương lai. - Qh0stM4N
Tại sao vậy !important cần thiết?


Mã bên dưới hoạt động tốt cho tôi (ít nhất là đối với Chrome).

Tôi cũng đã thêm một số điều khiển hướng trang và lề.

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

8
2017-12-11 22:55





Đảm bảo sử dụng thuộc tính quan trọng! Điều này làm tăng đáng kể khả năng phong cách của bạn được giữ lại khi in.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

7
2018-04-25 00:09



Bạn đã thực sự thử điều này chưa? - DisgruntledGoat
Tôi đã tạo một số báo cáo "thân thiện với máy in" đơn giản cho công ty của tôi bằng phương pháp này. Nó hoạt động trên OS X Chrome / Safari và Windows 8 Chrome / IE (chưa thử bất kỳ nền tảng nào khác). - nuts-n-beer
Điều này dường như không ảnh hưởng đến Chrome, Firefox và Safari trên Mac. - intcreator


Giống như @ ckpepper02 cho biết, nội dung cơ thể: tùy chọn url hoạt động tốt. Tuy nhiên, tôi thấy rằng nếu bạn sửa đổi nó một chút, bạn chỉ có thể sử dụng nó để thêm một hình ảnh tiêu đề của các loại bằng cách sử dụng: trước phần tử giả như sau.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Điều đó sẽ trượt hình ảnh ở đầu trang và từ thử nghiệm giới hạn của tôi, nó hoạt động trong Chrome và IE9

-hanz


6
2017-11-26 15:44