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 đây nhưng giải pháp không thể áp dụng trong trường hợp của tôi. Tôi muốn đảm bảo rằng một số hình ảnh nền nhất định đượ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 sprite.)

Một giải pháp khác cho cùng câu hỏi đó đề xuất sử dụng list-style-image, giải pháp này 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 thể có CSS ​​sprite.

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

Bạn có rất ít quyền kiểm soát các phương pháp in của trình duyệt. Nhiều nhất bạn có thể ĐỀ XUẤT, 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 viết lại trang của mình để biến hình nền thành hình ảnh "nền trước" nổi mà tình cờ nằm ​​sau nội dung khác.

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

Theo mặc định, các trình duyệt 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*/
}

Tôi đã tìm ra cách để in hình nền bằng CSS. Nó hơi phụ thuộc vào cách bố trí nền của bạn, nhưng nó có vẻ hiệu quả với ứng dụng của tôi.

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

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

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 thêm hình ảnh vào phần thân dưới dạng hình ảnh "tiền cảnh", do đó làm cho nó có thể in được. Bạn có thể cần thêm một số CSS bổ sung để làm cho z-indexphù hợp. Nhưng một lần nữa, nó phụ thuộc vào cách trình bày trang của bạn.

Điều này đã hiệu quả với tôi khi tôi không thể nhận được hình ảnh tiêu đề để hiển thị trong chế độ xem in.

Đoạn mã dưới đây hoạt động tốt đối với tôi (ít nhất là đối với Chrome).

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

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

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

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

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

Giống như @ ckpepper02 đã nói, tùy chọn body content: 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 hình ảnh tiêu đề của các loại bằng cách sử dụng phần tử: before pseudo 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

Sử dụng các phần tử psuedo. Trong khi nhiều trình duyệt sẽ bỏ qua hình nền, các phần tử psuedo với nội dung của chúng được đặt thành hình ảnh về mặt kỹ thuật KHÔNG phải là hình nền. Sau đó, bạn có thể định vị hình nền gần đúng nơi hình ảnh đáng lẽ phải đi (mặc dù nó không dễ dàng hoặc chính xác như hình ảnh gốc).

Một nhược điểm là để tính năng này hoạt động trong Chrome, bạn cần chỉ định hành vi này bên ngoài truy vấn phương tiện in của mình, sau đó hiển thị nó trong khối truy vấn phương tiện in. Vì vậy, một cái gì đó như thế này ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

Hạn chế là hình ảnh sẽ thường được tải xuống khi tải trang bình thường, thêm số lượng lớn không cần thiết. Bạn có thể tránh điều đó bằng cách chỉ sử dụng cùng một hình ảnh / đường dẫn mà bạn đã sử dụng cho hình ảnh gốc, hiển thị.

nó đang hoạt động trong google chrome khi bạn thêm thuộc tính! important vào hình nền, hãy đảm bảo bạn thêm thuộc tính trước và thử lại, bạn có thể làm như vậy

    .inputbg {
background: url('inputbg.png') !important;  

}

Bạn có thể sử dụng đường viền cho các màu cố định.

 borderTop: solid 15px black;

và đối với nền gradient, bạn có thể sử dụng:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687 đề xuất một giải pháp thanh lịch, sử dụng dấu đầu dòng tùy chỉnh thay cho hình nền:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

Bằng cách bao gồm điều này trong một

@media print {
}

chặn, tôi có thể thay thế một biểu trưng trắng trong suốt trên màn hình, được hiển thị dưới dạng hình nền, bằng một biểu trưng đen trong suốt để in.

Bạn có thể thực hiện một số thủ thuật như sau:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

Trong thẻ nội dung:

<img src="YOUR IMAGE URL" class="whater"/>