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

編集：これは、本質的に、あなたの他のコピーになり

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

：あなたは、印刷に設定されたメディアオプションを指定して、別のCSSスタイルシートを持っている必要があり

上記のコードでは、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

答えて

関連する問題