Hướng dẫn how to print background image in html - cách in ảnh nền trong html

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

Người dùng sẽ cần 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 nên đượ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 tuyến 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 được ẩ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.

Phải nói rằng, những gì bạn đang làm là thực hành khủng khiếp. Không có gì truyền tải thông tin có ý nghĩa cho người dùng nên được truyền tải chỉ bằng CSS. Nó không chỉ không chính xác về mặt ngữ nghĩa mà còn làm cho biểu đồ ít hữu ích hơn cho người dùng. Một 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.

Gọi cho chúng tôi: 1-800-931-6339 Gửi email cho chúng tôi: Email us:

2018-01-11

Để lưu máy in Toner Toner, cài đặt mặc định của máy in thường được in mà không cần hình ảnh và màu sắc. Nếu bạn muốn in email của mình bằng hình nền và màu nền, bạn sẽ cần điều chỉnh cài đặt máy in của trình duyệt.

Hướng dẫn how to print background image in html - cách in ảnh nền trong html

In trên Internet Explorer

  1. Trong thanh menu trình duyệt, nhấp vào Công cụ
  2. Chọn Tùy chọn Internet
  3. Đi đến tab nâng cao
  4. Cuộn xuống để in và kiểm tra & nbsp; bản in màu nền và hình ảnh
  5. Bấm OK
  6. In như bình thường

In trong Internet Explorer 9

  1. Trong thanh menu trình duyệt, nhấp vào Công cụ
  2. Chọn Tùy chọn Internet
  3. Đi đến tab nâng cao
  4. Bấm OK
  5. In như bình thường

In trong Internet Explorer 9

  1. Chọn thiết lập trang
  2. In, đánh dấu màu nền và hình ảnh
  3. Bấm OK
  4. In như bình thường

In trong Internet Explorer 9

  1. Chọn thiết lập trang
  2. In, đánh dấu màu nền và hình ảnh
  3. In như bình thường

In trong Internet Explorer 9

Chọn thiết lập trang

    • Xóa khỏi các diễn đàn của tôi

    • Câu hỏi

    • Người dùng-1641476077 đã đăng

      Chào. Tôi muốn các hình ảnh nền cho div và liên kết được in nhưng bất kể tôi làm gì, nó vẫn không hiển thị trong chế độ xem in. Tôi đã kiểm tra hộp kiểm để hiển thị hình nền và màu cho tất cả các trình duyệt và nó không hiển thị.

      CSS của tôi cho div và một thẻ

      div.background {
          background: url('/poly/Course%20Portal/courses/ACCOUNTANCY/banner1b_big.jpg') no-repeat top left;
          width:100%;
          height: auto;
          color:#FFF;
          font-family: 'Roboto';
      }
      a.button{
          font-family: 'Roboto';
          display:block;
          color:#FFF !important;
          background:url('/poly/Course%20Portal/courses/ACCOUNTANCY/bkg_button.png') no-repeat top right;
          text-align:right;
          padding:15px;
          padding-right:1.9em;
          font-size:1.5em;
      }
      

      Tôi cũng nhận ra rằng tất cả các div của tôi với màu nền cũng không hiển thị trong bản xem trước in. & NBSP;

      CSS cho màu nền

      div.head1 {
          font-family: 'Roboto';
          text-transform:uppercase;
          color: #FFF;
          font-size:1.3em;
          padding:10px 15px;
          background: #2b5e9d;
          text-align:left;
          margin-right:0;
      }
      div.item1 {
          font-family: 'Roboto';
          font-size: 18px;
          background: #f5f5f5;
          text-align:left;
          color: #2b5e9d;
          height: 7.5em;
      }

    Câu trả lời

      • Được đánh dấu là câu trả lời Bythursday, ngày 7 tháng 10 năm 2021 12:00 sáng Thursday, October 7, 2021 12:00 AM

    • Người dùng-1838255255 đã đăng

      Chào BCZM8703,

      Theo mô tả của bạn, vui lòng thử mã sau:

      Mã mẫu:

      <head>
          <title></title>
          <meta charset="utf-8" />
          <style>
              #SivaDiv {
                  background-image: url('../Buttfly.jpeg');
                  width: 300px;
                  height: 200px;
                  border: 1px solid red;
              }
      
              @media print {
                  .graph-img img {
                      display: inline;
                  }
              }
          </style>
          <script type="text/javascript">
              function printPage(elementId) {
                  var printContent = document.getElementById(elementId);
                  var windowUrl = 'about:blank';
                  var uniqueName = new Date();
                  var windowName = 'Print' + uniqueName.getTime();
                  var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
      
                  printWindow.document.write(printContent.innerHTML);
                  printWindow.document.close();
                  printWindow.focus();
                  printWindow.print();
                  printWindow.close();
              }
          </script>
      </head>
      <body>
          <div class="graph-image graph-7" id="SivaDiv">
              <img src="Buttfly.jpeg" alt="Graph Description" />
          </div>
          <input type="button" value="Print" onclick="JavaScript:printPage('SivaDiv');">
      </body>

      Result:

      Hướng dẫn how to print background image in html - cách in ảnh nền trong html

      Trân trọng,

      Eric du

      • Được đánh dấu là câu trả lời Byanonymousthursday, ngày 7 tháng 10 năm 2021 12:00 sáng Anonymous Thursday, October 7, 2021 12:00 AM

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

    In với hình nền và màu nền..
    Trong thanh menu trình duyệt, nhấp vào công cụ ..
    Chọn các tùy chọn Internet ..
    Đi đến tab nâng cao ..
    Cuộn xuống để in và kiểm tra màu nền in và hình ảnh.
    Bấm OK ..
    In như bình thường ..

    Làm cách nào để in một hình ảnh nền?

    Chuyển đến Tệp> Tùy chọn. DisplaySelect. Select Display. Under Printing Options select Print background colors and images.

    Làm thế nào để bạn mã hóa một nền trong HTML?

    Để thêm màu nền trong HTML, hãy sử dụng thuộc tính màu nền CSS.Đặt nó thành tên màu hoặc mã bạn muốn và đặt nó bên trong thuộc tính kiểu.Sau đó thêm thuộc tính kiểu này vào phần tử HTML, như bảng, tiêu đề, div hoặc thẻ span.use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

    Làm cách nào để in nền trang web?

    Truy cập vào "Cài đặt" của trình duyệt "hoặc" Tùy chọn "hoặc" Cài đặt trang "và chọn hộp có nghĩa là" in màu nền và hình ảnh ".