打印不打印背景图像。截屏时间较短，页面比A4短

Question

我在html / css中创建了一个简历。它在浏览器上呈现完美，但在打印时，它不会打印背景颜色，也会更改元素的对齐方式。

因此我将快照转换为jpeg，但是当从图像中取出打印件时，它会在页面的中心呈现，在两端留下一些空间。

这是我的代码段

:root {
      --font-color: #FFF;
      --section-bg: #424242;
      --info-head: #00B8D4;
      --border-color: #00B8D4;
      --progress-bar: #00B8D4;
      }



      @font-face {
          font-family: FontAwesome;
          font-weight: normal;
          font-style : normal;
                 src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
                 src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                       url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                       url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                       url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                       url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
      }
      h5 {
        letter-spacing: 5px;
        font-size: 18px;
        margin-bottom: 2px;
      }
      .name p {
        font-size: 16px;
      }
      .body {
        background-color: #ccc;
      }
      .container {
        background-color: #fff;
        width: 970px;
      }
      .content {
        text-align: center;
      }
      .section {
        background-color: var(--section-bg);
        padding-top: 40px;
      }
      .pic {
        border-radius: 50%;
        width: 100px;
      }
      .name {
        color: var(--font-color);
        margin-bottom: 70px;
      }
      .info-header {
        color: var(--info-head);
        text-align: left;
        letter-spacing: 5px;
        font-size: 16px;
      }
      .info-block {
        text-align: left;
        margin: 102px 0px;
        padding: 10px 0px;
        border: 2px solid var(--border-color);
        border-left: none;
        border-right: none;
        border-bottom: none;
        margin-top: 5px;
      }
      .block-part {
        color: var(--font-color);
        margin: 10px 0px;
        letter-spacing: 1px;
        font-size: 12px;
      }
      .icon {
        margin-right: 10px;
      }
      .progress {
        margin-bottom: 10px;
        height: 5px;
      }
      .progress-bar {
        background-color: var(--progress-bar);
      }
      .block-interest {
        margin-bottom: 10px;
      }
      .hobbies {
        text-align: center;
      }
      .hobbies-icon {
        font-size: 24px;
      }
      .main-content {
        padding-top: 15px;
        text-align: left;
        padding-left: 40px;
      }
      .main-content-header {
        font-size: 16px;
        letter-spacing: 3px;
        color: var(--info-head);
      }
      .work-comp {
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 0px;
      }
      .work-desc {
        color: #757575;
        margin-bottom: 2px;
      }
      .list-complete {
        list-style-type: none;
        margin-top: 15px;
        padding-left: 10px;
        margin-bottom: -15px;
      }
      .list-complete ::before {
        content: "\f121";
        font-family: FontAwesome;
        position: relative;
        top: -10px;
        left: -37px;
        color: var(--progress-bar);
      }
      .list-item {
        border-left: 1px dotted var(--progress-bar);;
        padding-left: 30px;
        position: relative;
      }
      .list-item ::before {
        content: "";
      }
      .list-item-last {
        border: none;
      }
      .work-content {
        top: -30px;
        position: relative;
      }
      .edu {
        margin-right: 5px;
      }
      .filled-icon {
        color: var(--progress-bar);
        font-size: 18px;
      }
      .unfilled-icon {
        color: var(--progress-bar);
        font-size: 18px;
      }
      .skill-row {
        padding-left: 40px;
        margin-top: 10px;
      }
      .skill-star {
        margin-top: 5px;
      }
      .achievement {
        margin-top: 15px;
      }

<body class = "body">
    <div class = "container" id = "container">
      <div class = "row" id = "row-container">
        <div class = "col-sm-12 content">
          <div class = "row">
            <div class = "col-sm-3 section">
              <div class = "profile-pic">
                <img class = "pic" src = "./me.jpg" />
              </div>
              <div class = "name">
                <h5>ISHAN GUPTA</h5>
                <p>
                  Web Developer
                </p>
              </div>
              <div class = "info-header">
                INFO
              </div>
              <div class = "info-block">
                <div class = "block-part">
                  <i class="fas fa-map-marker-alt icon"></i>
                  <span>Andheri East, Mumbai, India</span>
                </div>
                <div class = "block-part">
                  <i class="fas fa-phone icon"></i>
                  <span>+91 8603561265</span>
                </div>
                <div class = "block-part">
                  <i class="fas fa-envelope icon"></i>
                  <span>mrishan1993@gmail.com</span>
                </div>
              </div>
              <div class = "info-header">
                INTERESTS
              </div>
              <div class = "info-block">
                <div class = "block-part">
                  <div class = "block-interest">
                    <i class="fas fa-lightbulb icon"></i>
                    Entrepreneurship
                  </div>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:85%">
                    </div>
                  </div>
                </div>
                <div class = "block-part">
                  <div class = "block-interest">
                    <i class="fas fa-money-bill-alt icon"></i>
                    Microeconomics
                  </div>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:75%">
                    </div>
                  </div>
                </div>
                <div class = "block-part">
                  <div class = "block-interest">
                    <i class="fab fa-bitcoin icon"></i>
                    Blockchain
                  </div>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:60%">
                    </div>
                  </div>
                </div>
                <div class = "block-part">
                  <div class = "block-interest">
                    <i class="fa fa-universal-access icon"></i>
                    Augmented Reality
                  </div>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:40%">
                    </div>
                  </div>
                </div>
              </div>
              <div class = "info-header">
                HOBBIES
              </div>
              <div class = "info-block">
                <div class = "row block-part hobbies">
                  <div class = "col-sm-3">
                    <i class="fas fa-film icon hobbies-icon"></i>
                  </div>
                  <div class = "col-sm-3">
                    <i class="fas fa-plane icon hobbies-icon"></i>
                  </div>
                  <div class = "col-sm-3">
                    <i class="fas fa-music icon hobbies-icon"></i>
                  </div>
                  <div class = "col-sm-3">
                    <i class="fas fa-book icon hobbies-icon"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class = "col-sm-9 main-content">
              <div class = "row main-content-header">
                <div class = "col-sm-12">
                  <i class="fas fa-briefcase icon main-icon"></i>
                  WORK EXPERIENCE
                </div>
              </div>
              <ul class = "list-complete">
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        Servify
                      </p>
                      <p class = "work-comp">
                        March '17 - Today
                      </p>
                      <p class = "work-desc">
                        Developed a Parts Management System on React + Redux with the functionality of raising and fulfilling orders, along with creating new parts. Support of billing and inventory were integrated.
                      </p>
                      <p class = "work-desc">
                        Owner of CRM on Riot.js with the functionality of raising service request, fulfilment, customer management, logisitcs mangement, and other related operational functions.
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        MAQ Software
                      </p>
                      <p class = "work-comp">
                        Sept '16 - March '17
                      </p>
                      <p class = "work-desc">
                        Developed a ChatBot using LUIS AI application which replies back with the corresponding reports of the query asked by the end user.
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item list-item-last">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        Independent Work
                      </p>
                      <p class = "work-desc">
                        Developed a React Native + Redux mobile application which showcases the comics and micro tales of a particular content creator.
                      </p>
                      <p class = "work-desc">
                        Developed a React + Redux application that enables the user to upload images to S3 and visualises the analytics using Chart.js
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
              <div class = "row main-content-header">
                <div class = "col-sm-12">
                  <i class="fas fa-graduation-cap icon main-icon edu"></i>
                  EDUCATION
                </div>
              </div>
              <ul class = "list-complete">
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        National Institute of Technology, Patna
                      </p>
                      <p class = "work-comp">
                        2012-2016, B.Tech, Computer Science and Engineering.
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        Agra Public School, Agra
                      </p>
                      <p class = "work-comp">
                        2009-2011
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item list-item-last">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        Delhi Public School, Agra
                      </p>
                      <p class = "work-comp">
                        2004-2009
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
              <div class = "row main-content-header">
                <div class = "col-sm-12">
                  <i class="fas fa-balance-scale icon main-icon edu"></i>
                  SKILLS
                </div>
              </div>
              <div class = "row skill-row">
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    React + Redux
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                  </div>
                </div>
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    Riot
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                  </div>
                </div>
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    React Native
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                  </div>
                </div>
              </div>
              <div class = "row skill-row">
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    Node
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                  </div>
                </div>
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    HTML & CSS
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                  </div>
                </div>
                <div class = "col-sm-4">
                  <div class = "work-comp">
                    Platform (DevOps)
                  </div>
                  <div class = "skill-star">
                    <i class="fas fa-star filled-icon"></i>
                    <i class="fas fa-star filled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                    <i class="far fa-star unfilled-icon"></i>
                  </div>
                </div>
              </div>
              <div class = "row main-content-header achievement">
                <div class = "col-sm-12">
                  <i class="fas fa-trophy icon main-icon edu"></i>
                  ACHIEVEMENTS
                </div>
              </div>
              <ul class = "list-complete">
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        Parallel World, Offcial magazine of NIT Patna
                      </p>
                      <p class = "work-desc">
                        Student Head
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        National Cyber Olympiad, 2005
                      </p>
                      <p class = "work-desc">
                        Bronze Medallist
                      </p>
                    </div>
                  </div>
                </li>
                <li class = "list-item list-item-last">
                  <div class = "row">
                    <div class = "col-sm-12 work-content">
                      <p class = "work-comp">
                        National Science Olympiad, 2007
                      </p>
                      <p class = "work-desc">
                        Bronze Medallist
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

`

Answer 1

打印对话

1. 点击“更多设置”
2. 勾选背景图片