Div Фоновое изображение Печать Пусто

У меня есть следующая страница html.Div Фоновое изображение Печать Пусто

<html> 
    <head> 
    </head> 
    <body style="margin: 10px"> 
     <div style='width: 100%; height: 100%; 
      background-image: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg"); 
      background-repeat: no-repeat; background-size:contain; background-position:center'> 
     </div> 
    </body> 
</html>

Моя проблема в том, что когда я печатаю страницу, она показывает пробел. Означает ли это, что фон div не может быть напечатан. Если да, то как я могу изменить мою html-страницу, чтобы вести себя одинаково и до сих пор печатать? Моя конечная цель - напечатать изображение таким образом, чтобы он соответствовал странице.

P.S. Я попытался поместить свой код в fiddle, но он не отображается.

P.S. Мой картридж полон :)

источник

2016-04-01 yazanpro

Обычно фон не печатается по умолчанию. Вам нужно перейти к настройкам и выбрать фон для печати. [Взгляните на это] (http://prntscr.com/ammky2) – TheUknown

это работает в каждом браузере? – JordanHendrix

Я нашел его в Chrome, но как насчет IE и FF? – yazanpro

мне удалось сделать это таким образом:

<html> 
    <head> 
    <title></title> 
    </head> 
    <body style="margin: 5px; text-align: center"> 
     <img style="max-height: 100%; max-width: 100%" 
     src="https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg" alt="" /> 
    </body> 
</html>

И fiddle.

источник

2016-04-01 04:21:08 yazanpro

Edit:

Вы должны иметь другой CSS стилей, с помощью опции набора носителей для печати:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Это по существу является копией вашей другой но в приведенном выше коде его называют print.css

По умолчанию используется экран, поэтому нам обычно не нужно его устанавливать.

Это должно сделать это, но это не будет работать в скрипке, я обновлю, если смогу получить работу, чтобы показать вам. Дайте мне знать, если это сработает!

Fiddle

Следующая CSS будет работать во всех браузерах:

html { 
    background: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2016-04-01 01:23:41 JordanHendrix

Он по-прежнему печатает пусто! – yazanpro

Я пытаюсь. Кажется, он работает без изменения настроек в браузере для печати фоновых изображений. – yazanpro

вы сделали еще одну таблицу стилей? и добавил тег в голову? – JordanHendrix

ответ

Смежные вопросы