如何在打印时保留背景图像[重复]答案

【问题标题】：How to keep background image on printing [duplicate]如何在打印时保留背景图像[重复]
【发布时间】：2018-06-03 00:09:55
【问题描述】：

我有 HTML + CSS 页面，其中包含带有 CSS 中背景图像的 img 元素。

在 HTML 中：

<img class="symbol>

在 CSS (Sass) 中：

.symbol{
   background-image: url('../images/symbol.png');
   background-repeat: no-repeat;
   width: 50px;
   height: 50px;
   background-position: 15px, 15px;
}

它在 Chrome 中正确显示，但在打印 (ctrl + P) 时它会自动删除背景，但我也需要在打印页面中显示图像背景。

我该如何解决？

【问题讨论】：

我的 css 文件中有media: print，没有打印。为了保留图像，我应该添加什么？
有时图像打印取决于浏览器配置。
米克尔. Vicens - 有没有办法覆盖 css 中的浏览器设置？
不，这是由用户偏好控制的。
为什么不把图片放到source属性里？

标签： html css

【解决方案1】：

如果你添加

@media print {
  .symbol {
    background-image: url('../images/symbol.png');
  }
}

对于您的 CSS，您的背景图片应该在尝试打印页面时显示出来。如果您仍然看不到它，Chrome 在打印页面上提供了一些选项，其中之一是 Background graphics，请检查它，您的图像应该会显示。

【讨论】：