Làm cách nào để in hình nền mạnh mẽ trong HTML?

Question

Tôi cần in trang báo cáo có vài hình nền trên đó. Nhưng chỉ những hình ảnh này không thể in được. Những hình ảnh này là biểu trưng thực sự cho biểu đồ và do đó rất quan trọng trong báo cáo.

Tôi có một tùy chọn khác để tôi có thể cắt chúng và đưa vào trang dưới dạng thẻ nhưng đây là tùy chọn cuối cùng. Do đó trước đó tôi muốn biết liệu có cách nào để in những hình ảnh này một cách mạnh mẽ không? Ai có thể giúp tôi không?

Answer 1

Theo mặc định, trình duyệt sẽ bỏ qua các quy tắc nền css khi in một trang và bạn không thể khắc phục điều này bằng cách sử dụng css.

Người dùng sẽ cần phải thay đổi cài đặt trình duyệt của họ.

Do đó, bất kỳ hình ảnh nào bạn cần in phải được hiển thị dưới dạng hình ảnh nội tuyến thay vì nền css. Bạn có thể sử dụng css để hiển thị hình ảnh nội dòng chỉ để in. Một cái gì đó như thế này.

HTML

<div class"graph-image graph-7"> 
    <img src="graph-7.jpg" alt="Graph Description" /> 
</div> 

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;} 
.graph-image img{display: none;} 

@media print{ 
    .graph-image img{display:inline;} 
} 

Sử dụng mã này, hoặc mã tương tự, có nghĩa là hình ảnh được sử dụng một lần trong html và một lần trong css. Phiên bản html bị ẩn bằng cách sử dụng css và để in nó hiển thị như bình thường. Đây là một hack, nhưng nó sẽ làm những gì bạn muốn nó làm. Nó sẽ in hình ảnh.

Có nói rằng, những gì bạn đang làm là thực hành không tốt. Không có gì truyền tải thông tin có ý nghĩa cho người dùng nên được chuyển tải bằng cách sử dụng css một mình. Không chỉ là ngữ nghĩa sai, mà còn làm cho biểu đồ kém hữu ích hơn cho người dùng. Hình ảnh nội tuyến tốt hơn nhiều và nếu bạn có thể, đó là những gì bạn nên sử dụng.

Answer 2

nó đang làm việc trong google chrome khi bạn thêm! Thuộc tính quan trọng để hình nền chắc chắn rằng bạn thêm thuộc tính đầu tiên và thử lại, bạn có thể làm điều đó như tha

.class-name { 
    background: url('your-image.png') !important; 
} 

bạn cũng có thể sử dụng những cuộn in hữu ích và đặt vào cuối tệp css

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